Search code examples
jqueryajaximagepathload

jQuery: Check if image exists

I'm loading an image path via jQuery $.ajax and before showing the image I'd like to check if it in fact exists. Can I use the image load/ready event or something similar to determine that the file path is valid?

Having .myimage set to display: none, I'm hoping to do something like

$(".myimage").attr("src", imagePath);
$(".myimage").load(function() {
    $(this).show();
});

Is anything like that possible?

Solution

  • Well, you can bind .error() handler...

    Update: In jQuery 3.0 and later:

    $(".myimage").on("error", function() {
    $(this).hide();
});

    note: .error() was deprecated in jQuery 1.8 and removed in 3.0 but in in older versions you can:

    $(".myimage").error(function(){
  $(this).hide();
});

    well, yours is okay already with load-event

    $(".myimage").load(function() {
    $(this).show();
});

    the problem with this is if Javascript was disabled the image will not ever show...