jquery - images - Cómo manejar “imagen corrupta o truncada” en firefox

lazy load scroll

Question

ENCHUFAR

Estoy usando un plugi jQuery llamado lazyload .

Lo que esto hace es cargar imágenes lazy , lo que significa que no las muestra en el navegador hasta que la imagen está dentro del alcance de la ventana gráfica.

Esto es útil cuando tienes una página que tiene muchas imágenes, por ejemplo, y no quieres que se pase para siempre con la carga inicial.

FIREFOX

Ok, entonces también estoy usando la versión 23.0.1 Firefox

PROBLEMA

El complemento es excelente, sin embargo, al desplazarme hacia abajo después de algunas imágenes, empiezo a tener errores en los que la imagen no se carga (solo tiene un marcador de posición genérico para un enlace de imagen roto) y en la consola registra:

Image corrupt or truncated: [image url]

No es que haya un problema con la imagen. Todos se hacen bien individualmente.

No está en una imagen específica ya que es aleatoria. Si vuelvo a cargar la página, las imágenes que estaban corrupt pueden cargarse ahora, con otras imágenes que devuelven un enlace roto y el registro está corrupt en la consola.

Busqué por esto, y parece que hay algún problema con las búsquedas simultáneas para una etiqueta src <img> .

Posiblemente debería haber un retraso establecido en la búsqueda, sin embargo, no siempre se puede decir cuánto tiempo debe ser el retraso. Y si una imagen es más grande que otra, aún podría entrar en conflicto (con un tiempo de retardo estático, en lugar de una devolución de llamada complete ).

Por lo tanto, me gustaría solicitar:

a) Si alguien sabe de una solución para esto (como detectar cuándo se produce el error y volver a activar la función de carga de la imagen)
b) Si alguien puede proponer un $.extend() a la biblioteca de arriba (lazyload) que crearía una función de devolución de llamada y esperar hasta que todas las recuperaciones activas estén complete antes de cargar la siguiente (SI este es el problema, no estoy seguro si lo es) No soy un ninja jQuery, así que estoy un poco perdido en el código. Podría averiguarlo, pero probablemente estaría sucio ...
c) Si este NO es el problema, entonces se agradecería alguna orientación sobre cómo puedo resolver esto

Answer 1

Como se sugiere en esta answer a un problema similar al suyo:

Parece que al cambiar el atributo src de la etiqueta img, Firefox dispara un evento de carga. Esto es contrario a la especificación HTML5, que dice que si se cambia el atributo src, entonces se debe finalizar cualquier otra recuperación que ya esté en progreso (lo que hace Firefox), y no se debe enviar ningún evento . El evento de carga debe enviarse solo si la recuperación se completó correctamente. Así que diría que el hecho de que obtengas un evento de carga es un error de Firefox.

Y entonces:

La mejor opción puede ser crear un nuevo elemento cada vez que desee cambiar el atributo src.

Lo que tiene sentido. Dentro del código de lazyload , encontrará esta parte, que parece ser cuando se carga la imagen, respondiendo a un evento de desplazamiento que appear :

    /* When appear is triggered load original image. */
    $self.one("appear", function() {
        if (!this.loaded) {
            if (settings.appear) {
                var elements_left = elements.length;
                settings.appear.call(self, elements_left, settings);
            }
            $("<img />")
                .bind("load", function() {

                    var original = $self.attr("data-" + settings.data_attribute);
                    $self.hide();
                    if ($self.is("img")) {
                        $self.attr("src", original);
                    } else {
                        $self.css("background-image", "url(''" + original + "'')");
                    }
                    $self[settings.effect](settings.effect_speed);

                    self.loaded = true;

Puede colocar un operador AND seguido de alguna bandera o retorno de fuction que verifique si la última imagen ya está completamente cargada en esa parte:

if ($self.is("img") && lastImageIsLoadde() === true) { /*pseudocode here*/

evitando así que img src sea ​​reemplazado antes de su hora correcta (ya que settings.placeholder es la imagen que el script toma en lugar del que se va a cargar cuando se desplaza) y ve si funciona para usted.

Answer 2

Primero comprobaría si tiene una versión actualizada de la biblioteca de carga lenta. https://github.com/tuupola/jquery_lazyload/blob/master/jquery.lazyload.min.js

Actualmente v 1.9.7 es la última. Podría ser un error que ya han solucionado. (changelog: https://github.com/tuupola/jquery_lazyload/blob/master/CHANGELOG.textile )

En segundo lugar, ¿qué versión de jQuery estás usando? ¿Tal vez un jQuery muy antiguo con una biblioteca antigua de carga lenta cause este problema? (O tal vez el nuevo jQuery?)

Si todo está bien, ¿quizás puedas ver cómo se inicia la carga lenta? ¿Tiene solicitudes de ajax y reinicia la carga lenta? (No debe causar problemas, pero nunca se sabe). ¿O intentar diferentes doctype / html estructura?

Si nada funciona, me gustaría "desarmar" el documento html a una versión realmente limpia donde funciona la carga lenta (solo las pruebas de localhost, o jsfiddle o algo así) y volver a colocar las partes una por una. Eventualmente deberías ver dónde se rompe la funcionalidad.

Con jQuery v1.9.1 y Lazyload v1.9.7 debería funcionar con esto:

$(''.lazy'').lazyload();

Aquí hay un jsfiddle para probar: http://jsfiddle.net/web_nfo/21qb88v1/

O tal vez Firefox es el problema. Actualmente la versión 40 es la más reciente. Tal vez usted también tiene una versión ''beta'' instalada? ¿O en modo seguro?