html - usar - ¿Por qué el evento onerror de Chrome para el elemento img solo se dispara una vez?

usar atributo alt en html

Question

¿Por qué Chrome solo llama al evento onerror para el elemento img una vez cuando todos los demás navegadores (IE7,8,9, FF, Opera y Safari) lo invocan repetidamente?

¿Hay alguna manera de obligarlo a repetir nuevamente la llamada onerror (en Chrome)?

jsfiddle

HTML:

<div id="thisWorks">
    this works in Chrome. onerror event is called once.
    <img src="http://www.asdfjklasdfasdf.com/bogus1.png" 
        onerror="fixit(this);" 
        rsrc="http://eatfrenzy.com/images/success-tick.png" />
</div>

<div id="thisDoesNotWork">
    this does not work in Chrome. onerror event is not called twice.
    <img src="http://www.asdfjklasdfasdf.com/bogus1.png" 
        onerror="fixit(this);"
        rsrc="http://www.asdfjklasdfasdf.com/bogus2.png|http://eatfrenzy.com/images/success-tick.png" />
</div>

JAVASCRIPT:

function fixit(img)
{
    var arrPhotos = img.getAttribute(''rsrc'').split(''|'');

    // change the img src to the next available
    img.setAttribute(''src'', arrPhotos.shift());

    // now put back the image list (with one less) into the rsrc attr
    img.setAttribute(''rsrc'', arrPhotos.join(''|''));

    return true;    
}

EDITAR: El comentario de Per @Sunil D. sobre que Chrome no emite una nueva búsqueda debido al nombre de dominio no válido de www.asdfjklasdfasdf.com en el ejemplo inicial del violín , www.asdfjklasdfasdf.com y cambié el nombre de dominio para que coincida con el de la imagen de éxito, pero con un nombre de archivo diferente por lo que todavía es un 404. Eso demostrará que no es el nombre de dominio no válido que hace que Chrome rescate en el segundo intento.

EDITAR: violín actualizado y el uso eliminado de jquery para simplemente cosas y descartar eso.

Answer 1

Éste es el comportamiento correcto. No desea descargar la misma imagen dos veces, eso es un desperdicio de ancho de banda.

¿Qué Chrome crea un objeto en memoria y luego lo aplicará a todas las imágenes con el src respectivo.

Si necesita descargarlo dos veces, cree esos objetos a través de javascript y asigne .onload=function() { .. } a cada uno.

Answer 2

Creo que @Mikhail está en el camino correcto, excepto por una razón ligeramente diferente. En el segundo ejemplo, intenta descargar 2 imágenes del mismo dominio inexistente www.asdfjklasdfasdf.com .

Al intentar descargar bogus1.png , Chrome no puede resolver el dominio a una dirección IP.

Al intentar descargar bogus2.png (del mismo dominio inexistente), Chrome no hace nada en absoluto ... porque sabe que la búsqueda del dominio ha fallado. Si el comportamiento correcto de Chrome no es enviar otro evento onerror podría estar abierto al debate :) En onerror espero que así sea.

Para probar esto, simplemente agregue 1 carácter al nombre de dominio para bogus2.png y funcionará como esperaba.

Editar

Una forma de forzarlo a intentar las descargas posteriores es cambiar el src de <img> a la cadena vacía. Es un poco raro, pero funciona. Puede configurar su atributo rsrc a algo como esto:

rsrc="''''|http://www.asdfjklasdfasdf.com/bogus2.png|''''|http://eatfrenzy.com/images/success-tick.png"

De esta forma, cuando se produce el error, establece el origen en ''''. Esto parece generar un error también, que luego lo dispara a probar la siguiente fuente ...

Answer 3

He intentado las formas mencionadas anteriormente, setAttribute (''src'', null) tiene un efecto secundario, es decir, agrega otra solicitud.

Finalmente, yo uso

    setTimeout(function(){ imgElement.src = ''http://xxxx''; }, 0)

¡y esto funciona!

Ver el jsfiddle por ejemplo.

Answer 4

Ok, lo tengo. Dentro de la función que asigna al evento onerror, establezca el atributo src en null antes de cambiarlo a su nuevo valor .

img.setAttribute(''src'', null);

violín de trabajo

Esto de alguna manera provoca que Chrome lo reinicie y lo forzará a invocar repetidamente onerror si los valores posteriores para src devuelven un error.

Nota: una cadena vacía no funcionará y debe ser null .
Nota 2: esta corrección funciona usando javascript puro (pero no con el método jquery .attr ). Después de publicar esta solución, la probé con el método jquery .attr configurándolo en $img.attr(''src'', null); pero no funcionó de esa manera y cuando lo cambié a javascript, funcionó. También probé utilizando el método jquery .prop lugar como $img.prop(''src'', null); que funcionó la primera vez y falló en algunas actualizaciones posteriores. Solo el javascript puro parece ser una solución segura.

ACTUALIZAR:
Está bien, resulta que mientras el cambio anterior corrige Chrome y hace que invoque repetidamente onerror como todos los otros navegadores (FF, Safari, Opera, IE7-9), causa problemas con el evento onerror para IE10 y por lo tanto ignora cualquier imagen válida asignado a src después de establecerlo como =null en la línea anterior. (...suspiro).

Answer 5

Como respondió Etdashou sobre esta pregunta: https://.com/a/9891041/1090274 , estableciendo this.onerror=null; trabajó para mi.