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

Answer 2

(function($) {
    var photos = ["images/bg01.jpg", "images/bg02.jpg", "images/bg03.jpg"];

    var i = 0;
    function preloadImage() {

        var image = new Image();

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

            i++;
            preloadImage();
        };

        image.src = photos[i];


    };

}(jQuery);

这将...

1. 加载您的图像
2. 将其设置为容器的背景
3. 重复下一张图片

Answer 3

你可以这样做：

var imgCount = images.length;
var counter = 0;
$.each(images, function(i, n) {
   // load each image
   $("<img />").attr("src", n)
               .load(function() {
                  counter++;
                  if(imgCount == counter) {
                     // all images have loaded
                     // call setInterval
                  }

              });
});