Question

我每隔一秒切换一次页面背景。为了防止闪烁，我预加载图像并在启动时工作，但几秒钟后图像再次被加载，并且可能随机导致闪烁。 Chrome开发者工具说它是从缓存中加载的，但是一开始它甚至不需要从缓存中加载，它可以正常工作。

有什么想法吗？这是一个例子：

gImages= [
    'assets/img/background/09.jpg',
    'assets/img/background/01.jpg',
    'assets/img/background/08.jpg'
];

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        (new Image()).src = this;
    });
}

preload(gImages);

var currentImage = 0;

var SwitchBackground = function() {
    var image = $('#intro');
    image.css("background", 
              "url('assets/img/background/'+gImages[currentImage]"') 
              50% 0 no-repeat fixed');


    currentImage++;

    if(currentImage == gImages.length)
    {
        currentImage = 0;
    }
};

window.setInterval(function() 
{
    SwitchBackground();
}, 1000);

哦，我注意到了另外一件事，第一次加载始终来自（发起人）jquery-1.10.2.js：4112。在Initiator鼠标上面说了一些关于bootstraps的东西，它们也被使用了。之后，启动器始终相同，jquery-1.10.2.js：7031。有什么想法吗？

编辑：jquery-1.10.2.js：7031由我的代码中的switchBackground调用触发。

所以是的，我的基本问题是我希望摆脱的闪烁效果:)谢谢！

Answer 1

if(currentImage == gImages.length)
{
     currentImage = 0;
     SwitchBackground();
}

每当currentImage等于图像数组长度时，您将currentImage设置为0并强制切换背景与您的setInterval冲突并且很可能是导致闪烁的原因

Answer 2

在开始显示之前，您需要等待所有图像加载

var count = 0;
function preload(arrayOfImages) {
   _.each(arrayOfImages, function(imageSource){
          var imageElement = new Image();
          imageElement.onload = function () {
              count++;
              if (count === arrayOfImages.length) {
                  tada();//here you activate your page
              }
          };
          imageElement.src = imageSource;
   });
}

用于背景切换的闪烁预加载图像

2 个答案: