jQuery check status

Question

This function everytime gives "false", even if image_url exists

// some .each {
    var item = $('.item', this);
    $.ajax({
        url: image_url,
        success: function() {
            item.html("true");
        },
        error: function() {
            item.html("false");
        }
    });
// }

Its used to check existance of image_url file - this variable gives url like http://blog.com/teddybear.png

Any idea?

Answer 1

You can't do something like this due to the same-origin policy which prevents fetching any data from another domain.

However, there is hope! You can use the error event for an <img> element to see if it exists, like this:

function testImage(url) {
    $("<img />", { 
      error: function() { item.html('false'); }, 
      load: function() { item.html('true'); }
    })​​.attr('src', url);
}

You can view a quick demo here, it tests for an image that does exist, waits 2 seconds then tries one that doesn't. This uses the $(html, props) creation method to create a <img> element, assign events, then set the src, we're just checking which event gets hit as the pass/fail check.