183 votos

jQuery devolución de llamada en la carga de imágenes (incluso cuando la imagen se almacena en la caché)

Quiero hacer:

  $("img").bind('load', function() {
    // do stuff
  });

Pero el evento de carga no se dispara cuando se carga la imagen desde la memoria caché. El jQuery docs sugieren un plugin para solucionar este problema, pero no funciona

393voto

Nick Craver Puntos 313913

Si el src ya está establecida, entonces el caso se disparo en la memoria caché con alojamiento antes de obtener el controlador de eventos enlazados. Para solucionar este problema, puede crear un bucle a través de la comprobación y disparo el evento se basa .complete, como este:

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) $(this).load();
});

Nota el cambio de .bind() a .one() para el controlador de eventos no se ejecuta dos veces.

27voto

Gus Puntos 3577

Puedo sugerir que usted se recarga en un no-DOM objeto de la imagen? Si está en la caché, esto le llevará nada de tiempo, y el onload se sigue fuego. Si no está en el caché, se disparará el onload cuando se carga la imagen, que debe ser al mismo tiempo el DOM versión de la imagen termina de cargar.

Javascript:

$(document).ready(function() {
    var tmpImg = new Image() ;
    tmpImg.src = $('#img').attr('src') ;
    tmpImg.onload = function() {
        // Run onload code.
    } ;
}) ;

Actualizado (para manejar múltiples imágenes y correctamente ordenados onload archivo adjunto):

$(document).ready(function() {
    var imageLoaded = function() {
        // Run onload code.
    }
    $('#img').each(function() {
        var tmpImg = new Image() ;
        tmpImg.onload = imageLoaded ;
        tmpImg.src = $(this).attr('src') ;
    }) ;
}) ;

19voto

guari Puntos 916

Mi solución simple, no necesita ningún plugin y en mis pruebas siempre funcionó:

/**
 * Trigger a callback when the selected images are loaded:
 * @param {String} selector
 * @param {Function} callback
  */
var onImgLoad = function(selector, callback){
    $(selector).each(function(){
        if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
            callback.apply(this);
        }
        else {
            $(this).on('load', function(){
                callback.apply(this);
            });
        }
    });
};

utilizar como esta:

onImgLoad($('img'), function(){
    // do stuff
});

por ejemplo, para que aparezca en las imágenes de la carga que usted puede hacer:

onImgLoad($('img'), function(){
    $(this).hide().fadeIn(700);
});

COMO ALTERNATIVA, si prefiere un plugin de enfoque:

/**
 * Trigger a callback when 'this' image is loaded:
 * @param {Function} callback
 */
(function($){
    $.fn.imgLoad = function(callback) {
        return this.each(function() {
            if (callback) {
                if (this.complete || /*for IE 10-*/ $(this).height() > 0) {
                    callback.apply(this);
                }
                else {
                    $(this).on('load', function(){
                        callback.apply(this);
                    });
                }
            }
        });
    };
})(jQuery);

y el uso de ella de esta manera:

$('img').imgLoad(function(){
    // do stuff
});

por ejemplo:

$('img').imgLoad(function(){
    $(this).hide().fadeIn(700);
});

14voto

Björn Puntos 15485

¿De verdad tenemos que hacer con jQuery? Puede adjuntar la onload evento directamente a su imagen;

<img src="/path/to/image.jpg" onload="doStuff(this);" />

Que se disparará cada vez que la imagen haya cargado, de la memoria caché o no.

4voto

Chuck Conway Puntos 10293

Una modificación de GUS ejemplo:

$(document).ready(function() {
    var tmpImg = new Image() ;
    tmpImg.onload = function() {
        // Run onload code.
    } ;

tmpImg.src = $('#img').attr('src');
})

Establecer el origen de antes y después de la onload.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X