Chaging background-Image sử dụng Jquery gây ra hiệu ứng nhấp nháy

Question

Follwing là phần của tập lệnh mà tôi đang sử dụng để tạo thanh trượt bằng cách thay đổi hình nền cho mọi imageobject i có trong một chu kỳ ..

 #Sliderimg - height is 500px, 

     $("#Sliderimg").css({ 
      "background-image": "url(../Images/" +SliderImageObj.image + ")", 
      "display": "block", 
      "z-index": "50px" 
     }); 

Điều gì có thể đã đi sai với điều này khi tôi nhận được hiệu ứng nhấp nháy mỗi khi tôi thay đổi hình ảnh, Vấn đề của tôi không phải là với hình ảnh mới sắp tải, nhấp nháy của nó (nhấp nháy ở cuối màn hình) cho hình ảnh cũ sắp được thay thế.

Answer 1

Có thể xóa "px" khỏi thuộc tính chỉ mục z của bạn? Nó có giá trị thập phân.

Answer 2

Bạn thấy nhấp nháy vì mỗi khi bạn thay đổi hình nền, trình duyệt của bạn phải tải xuống trước khi có thể hiển thị nền. Nếu hình ảnh không quá lớn (nhiều hơn nói, 5kb), bạn có thể thử lưu vào bộ nhớ đệm trong trình duyệt bằng cách áp dụng chúng cho các yếu tố mà chúng không hiển thị.

Ngoài ra, 50px không phải là chỉ mục z hợp lệ, thuộc tính đó chỉ yêu cầu số nguyên.

Answer 3

trình duyệt buộc phải vẽ lại toàn bộ nền.

cách thực hiện việc này bằng cách đặt nền thành trắng và sau đó vẽ lại nền mới.

sử dụng jquery.animate() để chiến đấu với điều này.

Answer 4

Tôi đã gặp vấn đề tương tự vào ngày khác. Kỳ lạ thay, nó có vẻ là ok trong FF, nhưng sẽ nhấp nháy trong IE, Chrome, và đôi khi Safari. Giải pháp là sử dụng một bảng sprite css. Bạn tạo một hình ảnh có cả hai hình nền bên cạnh nhau. Bạn chỉ hiển thị một phần của trang tính nền. bạn chuyển đổi nó bằng cách điều chỉnh lề trên nền. Bạn có thể xử lý các điều chỉnh lề bằng cách sử dụng addClass và removeClass. Dưới đây là mã, xem ở đây để một fiddle: http://jsfiddle.net/fMhMY/

CSS

.navButton span{ 
width:32px; 
height:32px; 
display:block; 
} 

a.leftButton span, a#leftButton span{ 
background-image:url(Prev.png); 
background-position:-64px 0px; 
} 

/*nav button sprites */ 

/*sprite order is pushed, hover, natural */ 

a.leftButton.navOver span, a.rightButton.navOver span{ 
background-position:-32px 0px; 
} 

a.leftButton.navPressed span, a.rightButton.navPressed span{ 
background-position:0px 0px; 
} 

HTML

<div style='display:inline-block'> 
    <a href="javascript:void(0);" class="leftButton navButton" id='lefty'> 
     <span></span> 
    </a> 
</div> 

jQuery

$('.leftButton').mousedown(function() { 

     $('.leftButton').addClass('navPressed'); 
     console.log('mousedown'); 

}); 
$('.leftButton').mouseup(function() { 
     $('.leftButton').removeClass('navPressed'); 
     console.log('mouseup'); 
}); 

$('.leftButton').hover(function() { 
     $('.leftButton').addClass('navOver'); 
     console.log('hover'); 
}); 


$('.leftButton').mouseout(function() { 
     $('.leftButton').removeClass('navPressed').removeClass('navOver'); 
     console.log('mouseout'); 
});