滚动背景更改正在闪烁

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

这就是我所拥有的：

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 。