jquery/javascript - hide div if containing image is broken

Question

i have a div with the class 'userFeatureProductImage'. this div is repeated however occasionally a broken image might come through so i want to hide the div as a precaution if this does happen. how can i do this?

Answer 1

The load event is only fired if an image is valid:

$('.userFeatureProductImage').hide();
$('.userFeatureProductImage img').load(function() {
  $(this).closest('.userFeatureProductImage').show();
});

Answer 2

Use the error event which is called when an error occurs with the image:

$(".userFeatureProductImage img").error(function(){
   $(this).parent().hide();
});

Example: http://jsfiddle.net/jonathon/vWwpc/

Answer 3

You might try something like this:

<script type="text/javascript" 
        src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
     function hideBrokenImage(id) {
          $(id.+"userFeatureProductImage").hide();
     }
</script>
<div id="imageFilename" class="userFeatureProductImage">
     <img src="imageFilename.gif" onerror="hideBrokenImage(imageFilename);" />
</div>

Where imageFilename is obviously dynamically created.