图像预加载器

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] + ')'}); 
     }; 

    } 

} 

这是工作，你的想法是有AA单随机图像添加到您的背景的假设下，而所有的图像都在装的背景。

Answer 2

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

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