for - Devolución de llamada Jquery Lazyload

lazy load jquery

Question

Actualmente estoy usando Jquery Lazy Load y me preguntaba si hay alguna manera de realizar una devolución de llamada cuando todas las imágenes de mi contenedor terminaron de cargarse (cuando la carga lenta ha hecho toda su magia).

La razón para esto es que estoy usando el plugin jScrollPane también y me gustaría llamar a la función de reinicialización de jScrollPane.

Gracias''

Answer 1

Para procesar la última imagen cargada y ejecutar solo el código y solo cuando haya finalizado (todas las imágenes cargadas), debe usar su función de controlador, como VAShhh dijo antes, a diferencia de la llamada de función solo debe enviar 2 parámetros, por lo que se invoca esta función con declaración de llamada javascript.

A continuación, podrá recuperar con éxito el parámetro " elements_left " y compararlo con 0 (cero): última imagen cargada a la izquierda. Algo como esto:

function yourhandler(elements_left, settings) {
    var imageNode, container;
    if(elements_left === 0) {
       // All images were loaded.
       // Now do whatever you need with imageNode or its parents (container, etc) in order
       // to run any other Plugin
       imageNode = $(this);
       container = settings.container;
       alert(''Ready to continue! Image node is $(this) and container settings.container'');
    }
}

Por favor, consulte este ejemplo en: jsfiddle.net/eRyww/4

Answer 2

Como respuesta alternativa, he creado un complemento de "carga lenta" que hará exactamente eso. Ofrece una devolución de llamada después de que todos los elementos se hayan cargado. Es un poco diferente y no solo para las imágenes, pero en cualquier momento los elementos seleccionados aparecen en el panel de vista del navegador.

https://github.com/shrimpwagon/jquery-lazyloadanything

Answer 3

Al observar la fuente, parece que el complemento de carga diferida llama a la función settings.load después de cargar una imagen que pasa el elemento de imagen cargado y un par de parámetros:

if (settings.load) {
    var elements_left = elements.length;
    settings.load.call(self, elements_left, settings);
}

Entonces probablemente solo deba establecer algo como esto:

function yourhandler(element, el_left, settings) {
    //Whatever you want
    //This function will be called each time that an image (element in this case) is loaded
}
$("img.lazy").lazyload({ 
    load : yourhandler
});

Si quiere estar seguro de que la imagen está cargada, puede adjuntar un oyente a la imagen cargada:

function yourhandler(element, el_left, settings) {
    element.load(function() {  
        alert(''Image Loaded'');  
    });
}

Editar

Después de probar el código, el método más "limpio" es adjuntarlo al método .load de sus imágenes:

$(''img.lazy'').load(function() {
    console.log($(this).attr(''src'') + '' loaded'');
});

$(''img.lazy'').lazyload({
    container:$(''.p_content''),
});​

http://jsfiddle.net/eRyww/72/