Question

我有几天这个问题Background Change on Scroll is flickering。它可以在我的电脑上运行。但是当我将其上传到服务器时，背景图像在向下滚动页面时仍然会闪烁。

我的代码现在看起来像这样:(是的，可能有太多的图片，但我不知道要改进这个）

我的js代码片段：

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

完整的JS代码：

http://jsfiddle.net/SEt53/

我希望有人可以帮助我！

Answer 1

无论用户向下滚动，您都会更改背景图片。改善这种情况的最佳方法是设置一个存储当前图像索引的全局变量，然后更新背景图像（如果它不同）。

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/

滚动背景图像仍然闪烁

1 个答案:

更新