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,1-over，2-over，3-over，4-over等）。滚动时，浏览器中未加载over个图像。换句话说，当你滚动时，你的CSS会说，“我需要切换图像。让我先删除当前图像... [图像消失] 好了...现在让我下载这张照片.Aaaaaaand，完成！ [图片重新出现] “这就是你所看到的”眨眼“。

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

预加载相关图片：
- http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
- http://css-tricks.com/snippets/jquery/image-preloader/
使用精灵（单个图像而不是8个）
- http://css-tricks.com/css-sprites/
- http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

希望这有帮助。

滚动时闪烁的侧边栏

1 个答案: