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

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

• javascript
• jquery
• html

4 Answers 4

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

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

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

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

Example: http://jsfiddle/jonathon/vWwpc/

You might try something like this:

<script type="text/javascript" 
        src="http://code.jquery./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.

jQuery equivalent of PHP's file_exists()?