19

I have http://jsfiddle.net/rcebw/3/

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!)

Improve this question
2
  • 1
    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. Commented Apr 15, 2011 at 15:32
  • >:( Don't know why that changed. Cheers. I'll have more to work with now! Commented Apr 15, 2011 at 15:35

4 Answers 4

Reset to default
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/

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Really handy! Tho throws an "resource not found" error to the console.
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!
2

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);
Improve this answer

Comments

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.

Improve this answer

3 Comments

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!
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.
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.
0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.