Determine image 404 / filesize with JS

Question

I have this function in JS that preloads images:

// http://stackoverflow.com/questions/3646036/javascript-preloading-images
var preloaded_images = [];
function preload() {
    for (i = 0; i < arguments.length; i++) {
        preloaded_images[i] = new Image();
        preloaded_images[i].src = preload.arguments[i];
    }
}

However, some images I try to preload throw 404 errors. How can I detect a 404 within this function, without trying to add the image to the DOM?

possible duplicate of [Determining image file size + dimensions via Javascript?](http://stackoverflow.com/questions/1310378/determining-image-file-size-dimensions-via-javascript) — Bhojendra Rauniyar, Jul 09 '15 at 12:04
Why not simply make the images available? Or, if they are not to be made available, remove them from your script? — Lightness Races in Orbit, Jul 09 '15 at 12:05

score 2 · Accepted Answer · answered Jul 09 '15 at 12:05

You could attach the onerror eventHandler:

...
preloaded_images[i].onerror = function() {
    // the image couldn't be loaded..
}
...

And if you want to know it was loaded successful, you would do:

...
preloaded_images[i].onload = function() {
    // the image was loaded successful..
}
...

Fiddle

Determine image 404 / filesize with JS

1 Answers1