0

我正在尝试制作图像预加载器。有一组低分辨率图像和一组高分辨率图像。我创建了一个新的图像对象并通过一个循环来预加载这些图像。然后，我使用一行 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] + ')'});    
                      }
4

3 回答 3

0

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

(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
})();
于 2012-08-29T10:54:09.620 回答
0

以我的经验 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] + ')'});   
        };

    }

}

这是在假设您的想法是将单个随机图像添加到背景中而所有图像都加载到背景中的假设下工作的。

于 2012-08-29T10:23:54.737 回答
0

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

imageObj.src = imagepath + images[i] + ')'; //Generates "url('whatever');"
//It can't be that, must just be the path.
于 2012-08-29T10:38:18.717 回答