Pregunta

Hace poco hice un pequeño fragmento de jQuery que me permite mostrar una img carga hasta que se cargue la imagen real.

El fragmento parece que funciona en Safari, Chrome, pero no en Firefox.

FireFox sólo muestra un alt loading y nunca cambia a la imagen cargada.

Aquí está el fragmento

var loading = $('<img src="/media/ajax-loader.gif" alt="loading" />');
    $('.thumbnail').each(function(){
        var loadIMG = loading.clone();
            $(this).after(loadIMG).load(function(){
                $(this).fadeIn('fast');
                loadIMG.hide();
        }).hide();
    });

Cualquier idea por qué?

¿Fue útil?

Solución

Usted no ha dicho exactamente lo que está happing en FF, pero por debajo puede ser uno de los problemas. De jQuery documentación

Es posible que el evento de carga no se activará si la imagen es cargado desde la memoria caché del navegador. A en cuenta esta posibilidad, podemos utilizar un evento de carga especial que los incendios inmediatamente si la imagen está lista. Actualmente es event.special.load disponible como un plug-in.

Aquí está la enlace de plugin.

Editar:

Con base en las observaciones de evento de carga, tratar a continuación:

$('.thumbnail').each(function(){
        var loadIMG = loading.clone();
            $(this).after(loadIMG).load(function(){
                $(this).fadeIn('fast');
                loadIMG.hide();
        }).hide();
        if (this.complete) $(this).trigger("load");
});

Por supuesto, el plug-in parece estar haciendo lo mismo junto con el manejo de algunos otros escenarios, así como.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top