Question

im trying to preload some images here. But what i need is to preload some images in an array, and show the progress.

This is working, but its giving me the GET 404 (Not Found) in console. But its working. What can i do to avoid this warning?

thanks!

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

Your recursive call of your start function is executing one too many times which is why you’d get the 404 message as there is no array element with an index equal to the length of the array. Arrays are zero-based. So for example, when you call if (id < images.length) { when id is two, you increment id to 3 and call start again, however there is no images[3].

Try this:

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);​