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

我每一秒钟就切换一次页面背景。为了防止闪烁，我预装了图像，并在启动它的工作，但几秒钟后图像再次被加载，这可能会随机导致闪烁。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。在启动器上，鼠标悬停在它上面表示一些关于引导的信息，它们也被使用。在这之后，启动器始终是相同的，jquery-1.10.2.js:7031。有什么想法吗

Edit:jquery-1.10.2.js:7031由来自我的代码的switchBackground调用触发

所以，是的，我的基本问题是我希望摆脱的闪烁效应：）谢谢

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

---

每当

currentImage

等于图像数组长度时，您将

currentImage

设置为0，并强制切换背景，该背景与

setInterval

冲突，很可能是闪烁的原因。

您需要等待所有图像加载后才能开始显示它们

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

---

这个js代码什么时候运行？它是否被简单地放在标题内的

标签中？您是否尝试过在

窗口中运行它。onload

？在$（document）.ready（function（）中）Scope你是否尝试过window.onload而不是document.onready？它们是不同的信号，但它们是相同的。也许我期望很多，我不确定。我将剥离我的页面，看看我是否可以对闪烁做些什么。我今天又在想这个问题，重点是它不会让你的页面等待图像，它只会触发它们的加载如果要完全加载，需要监听每个图像的onload函数，加载完所有图像后，激活pageFixed，但仍然是一样的：（因此tada（）是我的$（document）。ready（function（）{}？不知道如何使用此函数：）tada是你在页面中显示内容的地方。我写的内容会进入你的文档。OnReadyTanks，测试：这是测试页面。它仍在进行中。它对我有效，但有人说它仍然可以随机闪烁。我想你的服务器仍然在使用旧版本，一个简单的

for

loopThere，u用你的代码加载页面。我的朋友仍然有问题。他说加载图像不正常，但一切都很混乱，好像预加载根本不起作用：（加载以定义的间隔进行，即10秒。可能是.prev（）调用导致了问题吗？或者可能是视差？