Javascript图像预加载404错误

Question

即时尝试预载一些图像在这里。但我需要的是预先载入一些数组中的图像，并显示进度。

这是工作，但它给我的GET 404（未找到）在控制台。但它的工作。我能做些什么来避免此警告？

谢谢！

function start(id) { 
    var images = new Array(); 
    images[0] = "http://www.travelblog.org/Wallpaper/pix/tb_fiji_sunset_wallpaper.jpg"; 
    images[1] = "http://www.fantasy-and-art.com/wp-content/gallery/abstract-wallpapers/lion_hd_wallpaper.jpg"; 
    images[2] = "http://hidefwallpaper.org/wp-content/gallery/1_apple_wallpaper_02/90831582ea8e018759044f2820b518d1.jpg"; 
    imageObj = new Image(); 
    imageObj.src = images[id]; 
    imageObj.onload = function() { 
     if (id == images.length) { 
      alert('Carregou tudo'); 
     } 
     if (id < images.length) { 
      start(id + 1); 
      alert(id); 
     } 
    } 
} 
start(0);​ 

Answer 1

你你的启动函数的递归调用执行一个太多次这就是为什么你会得到404消息有等于数组长度的指标没有数组元素。数组基于零。例如，当您在id为2时致电if (id < images.length) {时，您将id增加到3，然后再次启动，但没有图像[3]。

试试这个：

var images = new Array(); 
images[0] = "http://www.travelblog.org/Wallpaper/pix/tb_fiji_sunset_wallpaper.jpg"; 
images[1] = "http://www.fantasy-and-art.com/wp-content/gallery/abstract-wallpapers/lion_hd_wallpaper.jpg"; 
images[2] = "http://hidefwallpaper.org/wp-content/gallery/1_apple_wallpaper_02/90831582ea8e018759044f2820b518d1.jpg"; 

function start(id) { 
    imageObj = new Image(); 
    imageObj.src = images[id]; 
    imageObj.onload = function() { 
     if (id == images.length) { 
      console.log('Carregou tudo'); 
     } 
     if (id < (images.length-1)) { 
      start(id + 1); 
     } 
    } 
} 
start(0);​ 

Answer 2

首先设置图像数组... 然后。

for(var i = 0; i < images.length; i++){ 
    imgsrc = images[i]; 
    var obj = new Image(); 
    obj.src = imgsrc; 
    obj.id = i; 
    obj.onload = function(){ 
     if(this.id == images.length-1){ 
      alert('Carregou tudo'); 
     } 
    } 
}