Rappel de Jquery Lazyload

Je suis actuellement en utilisant Jquery Lazy Load et je me demandais si il existe un moyen de faire un rappel lorsque toutes les images de mon conteneur clos de chargement (lorsque le lazy load a fait toute sa magie).

La raison pour cela est que je suis en utilisant jScrollPane Plugin ainsi et je voudrais appeler le jScrollPane réinitialiser la fonction.

Grâce"

source d'informationauteur Alvaro

  1. 22

    À la recherche à la source, il semble que le lazy load plugin appelle la settings.load fonction après le chargement d'une image en passant l'image chargée élément et un couple de paramètres:

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

    Donc vous aurez probablement besoin simplement de définir quelque chose comme ceci:

    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 vous voulez être sûr que l'image est chargée, vous pouvez attacher un écouteur à l'image chargée:

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

    Modifier

    Après avoir essayé le code, le plus "propre" de la méthode est de joindre à l' .load méthode de vos images:

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

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

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

  2. 1

    Afin de traiter sur la dernière image de charger et d'exécuter du code, et seulement quand c'est fini (toutes les images sont chargées), vous devez utiliser votre gestionnaire de fonction, comme VAShhh dit avant, à la différence de l'appel de fonction ne doit envoyer 2 paramètres, de sorte que cette fonction est appelée avec le javascript de l'instruction d'appel.

    Alors vous serez en mesure de récupérer correctement les "elements_left" paramètre et de le comparer à 0 (zéro): le dernier chargement de l'image de gauche. Quelque chose comme ceci:

    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');
    }
}

    Veuillez vérifier cet exemple: jsfiddle.net/eRyww/4

  3. 1

    Comme une alternative de réponse, j'ai créé un "lazy load" plugin qui permettra de faire exactement cela. Il propose un rappel lorsque tous les éléments ont chargé. C'est un peu différent et pas tout à fait juste pour les images, mais à tout moment les éléments sélectionnés entrent en vue de l'affichage du navigateur volet.

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