滾動上的閃爍側邊欄

Question

我有一個側欄不斷檢查用戶的滾動位置，並根據其位置，在需要指明頁面上的哪一部分被瀏覽時，更改側欄上特定圖像的背景圖像。在本地查看此側欄時，我會看到側欄閃爍。

將它上傳到我的網站並在那裏查看後，閃爍停止，但以防萬一，我想知道是否有人知道爲什麼以及如何阻止它。我的網站可以在側邊欄中看到動作（它是位於左側的側欄，編號爲1,2,3和4）爲here。我的代碼如下。

$(document).scroll(function() { 
var greenheight = document.getElementById('welcome_logo').offsetHeight; 
var redheight = document.getElementById('slideins').offsetHeight; 
var blueheight = document.getElementById('section_overview').offsetHeight; 
var yellowheight = document.getElementById('howsiteworks').offsetHeight; 

if($(window).scrollTop() > redheight){ 
    if (navslide != 2) { 
    if($(window).scrollTop() < greenheight+redheight){ 
     $('#side2').css("background-image", "url(images/sidebar/side2_over.fw.png)"); 
     $('#side1').css("background-image", "url(images/sidebar/side1.fw.png)"); 
     $('#side3').css("background-image", "url(images/sidebar/side3.fw.png)"); 
     $('#side4').css("background-image", "url(images/sidebar/side4.fw.png)"); 
     var navslide = 2 
    } 
    } 
} 

if($(window).scrollTop() < redheight) 
if (navslide != 1) { 
{ 
     $('#side1').css("background-image", "url(images/sidebar/side1_over.fw.png)"); 
     $('#side2').css("background-image", "url(images/sidebar/side2.fw.png)"); 
     $('#side3').css("background-image", "url(images/sidebar/side3.fw.png)"); 
     $('#side4').css("background-image", "url(images/sidebar/side4.fw.png)"); 
     var navslide = 1 
} 
} 

if($(window).scrollTop() > redheight+greenheight){ 
    if (navslide!=3) { 
    if($(window).scrollTop() < greenheight+redheight+blueheight){ 
     $('#side3').css("background-image", "url(images/sidebar/side3_over.fw.png)"); 
     $('#side1').css("background-image", "url(images/sidebar/side1.fw.png)"); 
     $('#side2').css("background-image", "url(images/sidebar/side2.fw.png)"); 
     $('#side4').css("background-image", "url(images/sidebar/side4.fw.png)"); 
     var navslide = 3 
    } 
    } 
} 

if($(window).scrollTop() > redheight+greenheight+blueheight){ 
    if (navslide!=4) { 
    if($(window).scrollTop() < greenheight+redheight+blueheight+yellowheight){ 
     $('#side4').css("background-image", "url(images/sidebar/side4_over.fw.png)"); 
     $('#side1').css("background-image", "url(images/sidebar/side1.fw.png)"); 
     $('#side2').css("background-image", "url(images/sidebar/side2.fw.png)"); 
     $('#side3').css("background-image", "url(images/sidebar/side3.fw.png)"); 
     var navslide = 4 
    } 
    } 
} 

}); 

Answer 1

這是因爲你使用不同的圖像爲每一個可能的方案（例如，1，2，3，4，一上，2-過來，三上，4以上，等等）。滾動時，瀏覽器不會加載over圖像。換句話說，正如你滾動，你的CSS去，「我需要切換圖像。讓我先刪除當前圖像... [圖像消失]行...現在讓我下載這個其他圖像。 Aaaaaaand，done！[image reappears]「這是您看到的」閃爍「。

兩個可應用於減輕這種基本技術：

1. 預加載相關圖片：
   • http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
   • http://css-tricks.com/snippets/jquery/image-preloader/
2. 使用精靈（單個圖像，而不是8）
   • http://css-tricks.com/css-sprites/
   • http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

希望這有助於。