4

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!

James Cazzetta
  • 3,122
  • 6
  • 32
  • 54

4 Answers4

3

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.

Jay Blanchard
  • 34,243
  • 16
  • 77
  • 119
  • so using php's function *file_exists* in an Ajax request should do it? (I knew this works, but I was wondering if it could be done with no Ajax) – James Cazzetta Dec 18 '12 at 16:24
  • 2
    Yes, and then you could return whatever message you needed to on the client-side to react appropriately. – Jay Blanchard Dec 18 '12 at 16:26
1

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.

Mevin Babu
  • 2,405
  • 21
  • 34
1

My solution: 

function imageExists(url) {
    return new Promise((resolve, reject) => {
        const img = new Image(url);
        img.onerror = reject;
        img.onload = resolve;
        const timer = setInterval(() => {
            if (img.naturalWidth && img.naturalHeight) {
                img.src = ''; /* stop loading */
                clearInterval(timer);
                resolve();
            }
        }, 10);
        img.src = url;
    });
}

Example:

imageExists(url)
    .then(() => console.log("Image exists."))
    .catch(() => console.log("Image not exists."));
wiktor
  • 1,605
  • 16
  • 13
  • How can I get `true` OR `false` return using this? I want to use in a `while` loop. – eapo Jan 04 '23 at 08:46
  • @eapo Hm, maybe you can change `reject()` to `resolve(false)` and `resolve()` to `resolve(true)` after `clearInterval` and then use `await imageExists` syntax to call the function in `while` loop. – wiktor Jan 05 '23 at 13:26
  • thank you. Here is my question as a thread with the evolved code: [javascript - Loop trough existing images, checking with Promise - Stack Overflow](https://stackoverflow.com/questions/75003793/loop-trough-existing-images-checking-with-promise) – eapo Jan 07 '23 at 01:35
0

Here's how you can check if an image exists:

  function checkImage(src) {
     var img = new Image();
     img.onload = function() {
     // code to set the src on success
  };
  img.onerror = function() {
// doesn't exist or error loading
 };

 img.src = src; // fires off loading of image
}

Here's a working implementation http://jsfiddle.net/jeeah/

Asif hhh
  • 1,552
  • 3
  • 15
  • 27