Question

I know this is such a lame question to ask, but it seems like I’m having trouble getting my brain back in gear after the Christmas period.

Simple question, I’m using the jQuery .error event to replace broken images using this bit of script

    $('#slideshowContainer img[name=imgStockItem]').error(function(){
         $(this).attr('src', '/assets/images/no-image-large.png');
    });

What I really want to do is have something like an if/else deal, where if the image is broken do this, else, do this.

I tried this:

   if($('#slideshowContainer img[name=imgStockItem]').error()){
          alert("true");
   } else {
          alert("false");
   }

But that just returns a true everytime, broken image or not.

Any ideas please?

Answer 1

The .error() event means.. error.

To know if image was loaded successfully, handle the .load event.

Now comes the tricky part.. to have jQuery (or JavaScript in general) trigger any of those events, you’ll have to manually assign the image src otherwise it will be “too late”.

So, have such image tag:

<img name="imgStockItem" my_src="image_source_here.png" />

Then such code:

$(document).ready(function() {
    $('#slideshowContainer img[name=imgStockItem]').each(function(index) {
        $(this).error(function() {
            $(this).attr('src', '/assets/images/no-image-large.png');
            $("#StatusDiv").append("image #" + (index + 1) + " is broken<br />");
         });

        $(this).load(function() {
            $("#StatusDiv").append("image #" + (index + 1) + " loaded successfully<br />");
        });

        $(this).prop("src", $(this).attr("my_src"));
    });
});

StatusDiv is just example for container showing the status of each image.

Live test case.