¿Cuál es la forma óptima de manejar imágenes rotas?

Question

Parece que hay algunas maneras de manejar imágenes rotas en una página html. Me gustaría saber qué formas tienen de uso popular y qué formas se consideran mejores prácticas.

Para iniciar He mirado en algún mí me gustan:

function imgErr(source) {  
    source.src = /images/missing.jpg"; 
    source.onerror = ""; 
    return true; 
} 
<img src="test.jpg" alt="test" title="test" onerror="imgErr(this);" /> 

Pros: trabaja cada vez, el evento siempre será capturado. El usuario nunca ve una imagen rota. Parece funcionar bien en todos los navegadores. Contras: Etiqueta onerror requerida en cada imagen, la función imgErr (fuente) tiene que estar en la cabeza para atrapar a los errores, ralentiza los usuarios experimentaron el tiempo de carga

$('img').error(function(){ 
    $(this).attr('src', 'missing.jpg'); 
}); 

Pros: muy poco código, funciona en todas las imágenes sin cambiar su margen de beneficio, puede ser lugar fuera de la cabeza Contras: puede perderse el evento de error en función de la velocidad de las páginas de eventos onload, ralentiza los usuarios experimentados tiempo de carga

$(window).load(function() { 
    $("img").each(function() { 
     if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
      var src = $(this).attr("src"); 
      var suffix = src.substring(src.length - 6, src.length).split('.')[0]; 
      suffix = suffix.charAt(suffix.length - 1);    
      $(this).attr("src", "/static/images/generic/missing_" + suffix + ".jpg"); 
     } 
    }); 
}); 

Pros: puede ser colocado en cualquier lugar en la página, arreglará las imágenes sin importar cuándo se ejecute, no ralentiza al usuario s tiempo de carga experimentado Contras: muestra una imagen rota hasta que se ejecuta creando una experiencia de usuario pobre

En mi situación, el tiempo de carga es el mayor problema pero no puedo obtener la última opción para trabajar en IE correctamente, ya que cambia ¡y ninguna imagen rota por igual!

Saludos, Denis

Answer 1

Un pensamiento que no vienen a la mente es la de crear un controlador de imagen en su servidor web, es decir

<img src="fetchimage.aspx?name=test.jpg" alt="test" title="test" /> 

Ignorar el aspx, es obvio que había sustituirse con cualquier su tecnología preferida de scripting del servidor era. Ese controlador puede tratar con los nombres de las imágenes que no están presentes entregando su missing.jpg para todos los nombres de imágenes desconocidas.

Aparte de eso, estás atascado con las opciones que das por lo que puedo ver. Cualquier javascript que se ejecute antes de que la página cargue los riesgos de no iterar sobre las etiquetas de img que aún no se han recibido y cualquier secuencia de comandos que espere a la página correrá el riesgo de que el usuario vea imágenes rotas.

Rock-> Usted < -Hardplace

Answer 2

En mi opinión, utilizando la etiqueta alt es suficiente y no hay necesidad de añadir complejidad a la página mediante la comprobación de que cada vez que el uso de JavaScript.

Por supuesto, necesita comprobar de vez en cuando que no tiene una imagen rota. There are tools to do it.

Answer 3

Idealmente, la etiqueta alt debería ser utilizada. Si esto es vital, la solución javascript realmente no es ideal porque no funcionará si JS está apagado. Sin embargo, podría hacer una especie de solución del lado del servidor. Algo en php podría hacerse así, pero requeriría una base de datos o algún tipo de forma de configuración de variables.

<?php 
if($image !== ''){?> 
<?php echo '<img src="$imgsrc" alt="$imgalt" />' ?> 
} 
<?php else { 
<?php echo '<img src="$imgmissing" alt="$imgalt" />' ?> 
} ?> 
<?php } ?>