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

图像预加载器

3 个答案: