图像预加载器

Question

我正在尝试制作图像预加载器。 有一个低分辨率图像阵列和一个高分辨率图像阵列。 我创建一个新的图像对象并循环运行以预加载这些图像。 然后，我使用一行Jquery将背景设置为使用低分辨率图像，直到加载了高分辨率对象为止；加载该对象时，我使用另一行Jquery来切换背景以使用此高分辨率图像。

我遇到的问题是该代码跳过了低分辨率背景设置并加载了高分辨率图像。

这是代码：

// Low res image array
    var lowres = ["image1lr.jpg", "image2lr.jpg", "image3lr.jpg", "image4lr.jpg"];  

// Full res image array
    var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];      


// Low res image path
    var lowresimagepath = "url(images/rotate-background/low_res/";
// Full res image path
    var imagepath = "url(images/rotate-background/";

// Counter
    var i = 0;  

// Image preloading
       for(i=0; i<=images.length; i++) 
       {
           // Create object
           imageObj = new Image(); 

           imageObj.src = imagepath + images[i] + ')';
       }

//Generate random number
    var rannum = Math.floor(Math.random() * images.length);    

//Set background image to random low res image
    $(".bg_home").css({'background-image': lowresimagepath +lowres[rannum]+')'});       

//Once image objects are loaded switch to high res image 
     imageObj.onLoad= function(){ 
                          $(".bg_home").css({'background-image': imagepath + images[rannum] + ')'});    
                      }

Answer 1

以我的经验，image.onLoad并不是很可靠。 在不同情况下，它不起作用，例如IE或缓存的图像。

我会看一下https://github.com/desandro/imagesloaded我已经使用了该库，并且效果很好。

至于您的代码，这似乎是无效的：

// Low res image array
var lowres = ["image1lr.jpg", "image2lr.jpg", "image3lr.jpg", "image4lr.jpg"];  

// Full res image array
var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];      


// Low res image path
var lowresimagepath = "images/rotate-background/low_res/";
// Full res image path
var imagepath = "images/rotate-background/";

//Generate random number
var rannum = Math.floor(Math.random() * images.length);      

for(var i = 0; i < images.length; i++) {
    var image = new Image();
    image.src = imagepath + images[i];

    if(i == rannum) {

        //Set background image to random low res image
        $(".bg_home").css({'background-image': 'url(' + lowresimagepath +lowres[i]+')'});       

        //Once image objects are loaded switch to high res image 
        iamge.onLoad= function() { 
                $(".bg_home").css({'background-image': 'url(' + imagepath + images[i] + ')'});   
        };

    }

}

这是在您的想法是将一个随机图像添加到背景而所有图像都加载到背景中的前提下进行的。

Answer 2

Image对象的src是css属性。 它应该只是URL

imageObj.src = imagepath + images[i] + ')'; //Generates "url('whatever');"
//It can't be that, must just be the path.

Answer 3

您的代码有很多问题，这是我制作的干净版本，但未经测试。

(function(){ // prevents name conflicting with other scripts 

    var BASE_PATH_LOW_RES = "images/rotate-background/low_res/",
        BASE_PATH_HIGH_RES = "images/rotate-background/"; // since these are constants its better to use capitalized letters

    var lastLoadedIndex = 0, // you must ensure all images are loaded and its hard to preload them in parallel
        randomIndex = Math.floor(Math.random() * images.length),
        images = [
            {low: "image1lr.jpg", high: "image1.jpg"},
            {low: "image2lr.jpg", high: "image2.jpg"},
            {low: "image3lr.jpg", high: "image3.jpg"},
            {low: "image4lr.jpg", high: "image4.jpg"}
        ];

    var onComplete = function() {
        $(".bg_home").css({'background-image': 'url(' + BASE_PATH_HIGH_RES + images[randomIndex] + ')'});
    }

    var loadNext = function(){
        if(lastLoadedIndex == images.length) { // all images has been preloaded
            onComplete();
        } else {
            var imgTemp = new Image();
                imgTemp.src = BASE_PATH_HIGH_RES + images[lastLoadedIndex++].high;
                imgTemp.onLoad = loadNext;
        }
    }

    $(".bg_home")
        .css({'background-image': 'url(' + BASE_PATH_LOW_RES + images[randomIndex].low + ')'});       

    loadNext(); // start to preload every image one after another
})();