Change image source if file exists

Question

The point of this is I will have numerous of these inlinediv divs. Each one has 2 divs inside it, one which holds an image and one which holds a link. These are generated dynamically from a list of the subsites on another site.

What I want it to do is check each div with the class inlinediv. Get the inner text of the link in div iconLinkText and search for a file with that name at the site. (http://www.mojopin.co.uk/images/ for this test.) If it exists then change the image src to it.

I am probably taking the absolutely wrong route for this but I can't seem to get it to work. When testing it can't even find the inlinediv div! Says it's null.

I'm pretty new to jQuery but does anyone have any advice? (I don't even know if I've explained myself well!)

Your immediate problem is you're using Mootools on your fiddle. You need to select the version of jQuery you want to use from the Framework dropdown. — codelahoma, Apr 15 '11 at 15:32
>:( Don't know why that changed. Cheers. I'll have more to work with now! — anothershrubery, Apr 15 '11 at 15:35

score 38 · Accepted Answer · answered Apr 15 '11 at 21:21

38

You don't have to use AJAX to do this, since you can hot-link images from other domains without any restrictions. 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/

answered Apr 15 '11 at 21:21

Matt King

2,146
15
8

Really handy! Tho throws an "resource not found" error to the console. – cronoklee Aug 30 '12 at 16:51
Various other "Duplicate" answers from similar questions did not work as well for me as this one did. Some AJAX driven approaches caused NS_ERROR_FAILURE's in Firefox, this one did not. Thanks! – Mike_K Feb 25 '14 at 15:44

score 2 · Answer 2 · answered Oct 16 '20 at 06:47

Here is a modern Promise based way, which will return a Promise with a boolean value.

function imageExists(src) {
    return new Promise((resolve, reject) => {
      var img = new Image();
      img.onload = function () {
        resolve(true);
      }
      img.onerror = function (error) {
        resolve(false);
      }
      img.src = src;
    })
}


const imagePath = "http://www.google.com/images/logo_sm.gif";
imageExists(imagePath).then(doesExist => {
  console.log('doesImageExist', doesExist);
});

You can of course use async/await syntax for this.

const doesImageExist = await imageExists(imagePath);

score 1 · Answer 3 · answered Apr 15 '11 at 15:23

1

The Same Origin Policy prevents you from making AJAX requests to other domains. Unless you're running this on "http://www.mojopin.co.uk", this code won't work.

answered Apr 15 '11 at 15:23

Diodeus - James MacFarlane

112,730
33
157
176

Ah right, well what would be the best way to check if a file exists? Also, it doesn't get past the fact that it can't seem to find `inlinediv`! – anothershrubery Apr 15 '11 at 15:26
Insert an IMG tag and hook up an onload event. Then set the SRC of the image to the one you're testing. If it doesn't a show up in a few seconds, it probably doesn't exist. – Diodeus - James MacFarlane Apr 15 '11 at 15:37
I don't understand, I want if the image doesn't exist to use the default image, but if it does exist to use it. I have got the rest of it working just need the check if exists. – anothershrubery Apr 15 '11 at 15:58

score 0 · Answer 4 · answered Apr 15 '11 at 15:41

You cannot solve this problem only with jQuery: The Same Origin Policy wont allow you to make requests to third web sites.

The easiest solution is to implement a service on your server that proxies the requests to the external website.

Basically if your website is on

http://www.foo.bar

then you create

http://www.foo.bar/scheckscript.php (for example)

that you can query with the url you need

http://www.foo.bar/scheckscript.php?url=http%3A//www.third.com

Change image source if file exists

4 Answers4

Linked

Related