Javascript check images exist before deploying them

Question

Possible Duplicate:
How do I check if file exists in jQuery or Javascript?

I'm building this dynamic slider from an XML file. The slider loads images from Target's server . Unfortunately not all the images on the xml exist on the server and I want to avoid blank slides (I place the images as background-image on each slide once I get the list).

Is there a way (with javascript) I can check these images are not 404 before I even bother to populate my slider? I cant do ajax because they are in another server I have no access to or control.

I just need to detect the faulty images before I put them on the list (array) Im feeding my slider.

Answer 1

What you can do is count the number of images, hook up onload events, load the using JS and count successes. After a timeout, assume they've failed.

Answer 2

You can do this using java script function and calling it on each img with an url.

function checkImage(src) {
  var img = new Image();
  img.onload = function() {
    console.log("Image is good");
    img.src = src; //
    return true;
  };
  img.onerror = function() {
    console.log("Image is bad");
    return false;
  };
}