滚动侧边栏闪烁

Question

我有一个侧边栏，它不断检查用户的滚动位置，并根据他们的位置，在需要时更改侧边栏上特定图像的背景图像，以指示正在查看页面上的哪个部分。在本地查看此侧边栏时，我看到侧边栏闪烁。

将其上传到我的网站并在那里查看后，闪烁停止了，但以防万一，我想知道是否有人知道为什么以及如何阻止它。我的网站是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、1-over、2-over、3-over、4-over 等）。 over 图像在滚动时不会加载到浏览器中。换句话说，当您滚动时，您的 CSS 会显示，“我需要切换图像。让我先删除当前图像...[图像消失] 好的...现在让我下载另一张图片。啊啊啊，完成了！[图像重新出现]”这是您看到的“闪烁”。

您可以应用两种基本技术来缓解这种情况：

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/

希望这会有所帮助。