带有 404 错误的 Javascript 图像预加载

Question

我正在尝试在此处预加载一些图像。但我需要的是预加载数组中的一些图像，并显示进度。

这是有效的，但它在控制台中给我 GET 404 (Not Found)。但它的工作。我该怎么做才能避免出现此警告？

谢谢!

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 消息的原因，因为没有索引等于数组长度的数组元素。数组是从零开始的。因此，例如，当您调用 if (id < images.length) {当 id 为 2 时，您将 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);​