滚动背景更改正在闪烁

Question

我试图让我的页面上的“滚动背景图像更改”。 但滚动时的变化是闪烁的。我无法在其他线程中找到解决方案。

这就是我所拥有的：

jquery的：

$(function(){
$(document).scroll(function () {


    if ($(this).scrollTop() > 1) {
        $('body').css({
            backgroundImage: 'url("img/picture1.jpg")'
        });
    }


      if ($(this).scrollTop() > 800) {
        $('body').css({
            backgroundImage: 'url("img/picture2.jpg")'
        });
    }

CSS：

body {
    background: url('../img/picture1.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
}

Answer 1

闪烁可能是由于第二次图像加载造成的。您可以使用javascript的本机Image对象预加载第二个图像：

var newImg = new Image();
newImg.src = 'img/picture2.jpg';

请参阅此jsfiddle。