jquery/javascript - ocultar div si la imagen que contiene está rota

Question

tengo un div con la clase 'userFeatureProductImage'. este div se repite, pero ocasionalmente puede aparecer una imagen rota, así que quiero ocultar el div como precaución si esto sucede. ¿Cómo puedo hacer esto?

Answer 1

el evento de carga solamente se dispara si una imagen es válida:

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

Answer 2

Utilice el evento error que se llama cuando se produce un error con la imagen:

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

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

Answer 3

jQuery equivalent of PHP's file_exists()?

Answer 4

Puede intentar algo como esto:

<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> 

Donde imageFilename es obviamente creado dinámicamente.