jquery - JQuery 中的 BG 图像预加载器

Question

我有一组图像

var photos = ["images/bg01.jpg", "images/bg02.jpg", "images/bg03.jpg"];

我循环遍历这个数组，并根据间隔将它们设置为 div 的背景

$("#bgimg" + activeContainer).css({
        "background-image" : "url(" + photos[i] + ")",
        "display" : "block",
        "z-index" : currentZindex
    });

编辑:我需要在执行 setInterval 函数之前预加载所有三个图像。

提前致谢!!

Answer 1

将变量设置为必须加载的图像数量。每次图像加载完成时就递减计数器，当计数器达到零时，开始显示图像。

function photoLoaded() {
    if(!--numPhotosLeft) {
        // start showing images
    }
}

var photos = ["images/bg01.jpg", "images/bg02.jpg", "images/bg03.jpg"];
var numPhotosLeft = photos.length;

for(var i = 0; i < photos.length; ++i) {
    var img = new Image();
    img.onload = photoLoaded;
    img.src = photos[i];
}