滚动上的背景更改闪烁 [英] Background Change on Scroll is flickering

问题描述

我试图在页面上处理滚动背景图像更改". 但是在滚动时，更改会闪烁.我在其他线程中找不到解决方案.

I tried to get the "background image change on scroll" working on my page. but while scrolling the changes are flickering. I couldn't find a solution in other threads.

这就是我所拥有的:

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;
}

推荐答案

闪烁可能是由于第二次加载图像.您可以使用javascript的本机Image对象预加载第二张图片:

The flickering is probably due to the second image loading. You can preload the second image using javascript's native Image object:

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

请参见 jsfiddle .

这篇关于滚动上的背景更改闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！