How to check in jQuery or javascript if image is available on remote server?

Question

I work with a large number of images that are stored on a remote server and I'd like to check (with jQuery or JS) which of them are available without loading them entirely. So far I tried 3 solutions, but none of them works like I want:

1.

var http = new XMLHttpRequest();
http.open('HEAD', imageUrl, false);
http.send();

if(http.status >= 400) {
    console.log("Error loading " + imageUrl);
}

With this one I get No 'Access-Control-Allow-Origin' header is present on the requested resource....

2.

$.ajax({
    type: "HEAD",
    async: true,
    url: imageUrl
}).done(function() {
}).fail(function() {
    console.log("Error loading " + imageUrl);
});

With this one I get the same error as above.

3.

var img = new Image();
img.onerror = function() { console.log("Error loading " + imageUrl) };
img.src = imageUrl;

This one works, but it loads entire images, which makes it very slow.

`without loading them entirely` unfortunately this is not possible. You can only check the image by requesting it, which will mean that the image data is returned in the request. The first 2 examples are restricted by browser security due to the [Same Origin Policy](http://en.wikipedia.org/wiki/Same-origin_policy). The third is the only workable client-side solution. — Rory McCrossan, Mar 15 '15 at 22:20
possible duplicate of [Check if image exists with given url using jquery](http://stackoverflow.com/questions/3381663/check-if-image-exists-with-given-url-using-jquery) — Turnip, Mar 15 '15 at 22:20
@uʍopǝpısdn - this is NOT a dup of that question because that question allows one to download the whole image and this question does not. Thus the solutions to that question are not solutions to this question so it can't be a dup. — jfriend00, Mar 15 '15 at 22:21
@RoryMcCrossan this is strange because if it's possible to load an *entire* image, like in solution 3, then it should be possible to load only the HEAD as well... — Vlad, Mar 15 '15 at 22:24
Can you put supporting server-based code on the remote server? If so, you could make a `checkImage` ajax call that would do the checking server-side and return you a boolean result. — jfriend00, Mar 15 '15 at 22:26

Boris Zagoruiko · Answer 1 · 2015-03-15T22:31:29.337

0

Yes, third option is the only legal way to do it with JavaScript in this situation. If you care about performance you can use your backend as proxy. You can send images urls array with regular AJAX and ping that urls with you backend.

edited Mar 15 '15 at 22:31

answered Mar 15 '15 at 22:22

Boris Zagoruiko

12,705
15
47
79

score 0 · Answer 2 · edited Oct 02 '18 at 18:05

var imgURL_BASE = "http://www.hayabusa2.jaxa.jp/galleries/onc/nav20181002/";
var imgURL_NAME = "201810021659.jpg"

document.addEventListener('DOMContentLoaded', function() {
  var img = document.body.appendChild(document.createElement("img"));
  img.onload = function() {
    console.log("Image available");
    document.getElementById("testresult").innerHTML = "Image found.<br>";
  };
  img.onerror = function() {
    console.log("Image NOT available");
    document.getElementById("testresult").innerHTML = "Image not available.<br>";
  };
  img.src = imgURL_BASE + imgURL_NAME;
});

Check result:
<span id="testresult" name="testresult"></span>

How to check in jQuery or javascript if image is available on remote server?

2 Answers2