滚动的背景图像仍在闪烁

Background Images on scroll still flickering

本文关键字：闪烁 图像 背景 滚动      更新时间：2023-09-26

我在Scroll上遇到了这个背景变化是一个闪烁了几天的问题。它能在我的电脑上工作。但当我把它上传到服务器时，背景图像在向下滚动页面时仍然闪烁。

我的代码现在看起来是这样的：（是的，也许有太多的图像，但我不知道要改进这一点）

我的js代码片段：

function preloadImages() {
    for (i = 0; i < arguments.length; i++) {
        imgs[i] = new Image();
        imgs[i].src = arguments[i];
    }

完整的JS代码：

http://jsfiddle.net/SEt53/

我希望有人能帮助我！

无论用户向下滚动，您都在更改背景图像。改善这一点的最佳方法是设置一个全局变量来存储当前图像索引，然后在背景图像不同时更新背景图像。

var cur_image_index = 0;
function switchImages() {
    var index = Math.floor($(window).scrollTop() / per);
    if(index != cur_image_index){
        $('body').css({
            backgroundImage: 'url(' + imgs[index].src + ')'
        });
        cur_image_index = index;
    }
}
$(window).scroll(function () {
    switchImages();
});

这是一个经过修改的JSFiddle：http://jsfiddle.net/SEt53/1/

注意：由于图像不可用，我无法使用提供的代码进行测试。

更新

甚至进一步修改为使用占位符图像来说明脚本的目标——这里没有滞后：http://jsfiddle.net/SEt53/3/

相关文章：