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

你的start函数的递归调用执行的次数太多了，这就是你得到404消息的原因，因为没有数组元素的索引等于数组的长度。数组是从零开始的。例如，当id为2时调用if (id < images.length) {时，将id增加到3并再次调用start，但是没有图像[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');
       }
    }
}

Javascript Image Preload 404错误

2 个答案: