Check if image exists without loading it

Question

I am currently using following script in a hover-functionality:

function UrlExists(url) {
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}

It loads every image each after the other, causing to slow down the entire website (or even crashing).

Is there a way to check if an image exists, though prevent loading it (fully) using javascript?

Thanks alot!

Answer 1

Since JavaScript (and therefore jQuery) is client-side and the image resides server-side before loading there is no way to check to see if the image exists without using Ajax or your server-side scripting to make sure the image exists.

Answer 2

There's no way determining using javascript or jQuery if an image exists without loading it.

workaround:

The only way to check if an image exists on the server side would be to try loading the image to a hidden div or something and check if the image is there or not and then display it.

or you can use some server side language of your choice like ( php, asp, jsp, python, etc ) and send the request to the image to the server side language (preferably using AJAX) and let the server side script check if the image exists or not and send back the image if present or sent an error code if not present.