Liaison de l'image téléchargement paresseux aux nouvelles images insérées après une requête ajax

Je suis en utilisant Mika Tuupola Paresseux pour Charger un plugin http://www.appelsiini.net/projects/lazyload à retarder le chargement d'images que vous le faites défiler vers le bas d'une longue galerie d'image. Le problème, c'est après 10 images, j'utilise infini défilement j'ai donc récupérer les 10 prochaines images, et de les ajouter via ajax. Le Chargement paresseux ne fonctionne plus sur cette prochaine fournée d'images modifiées.

C'est une jolie javascript-lourds galerie d'image, donc, pour tout le reste (comme les bulles d'aide, modal superpositions, etc) j'ai été en utilisant jQuery délégué() pour lier à ajax-les éléments insérés. Le problème avec le Lazy Load plugin, c'est que je ne suis pas sûr de ce que événement à lier.

Donc, dis-je veux chargement différé des images avec une classe de "paresseux". Je voudrais écrire ceci:

$("img.lazy").lazyload({ 
    effect: "fadeIn" 
});

et il fonctionne pour les 10 premières images, mais cesse de fonctionner après l'insertion plus via ajax. La seule chose à laquelle je pense est d'utiliser délégué sur un charge événement, comme suit:

$(document).delegate("img.lazy", "load", function(event) {  
    $(this).lazyload({ 
         effect: "fadeIn" 
    });     
});

mais qui casse tout.
Merci!

EDIT:
Le jQuery que j'utilise pour charger plus de dossiers (c'est une application Rails):

$(window).scroll(function() {
    var url;
    url = $(".pagination .next_page").attr("href");
    if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {
    $(".pagination").html("<p>loading more images...</p>");
    return $.getScript(url);
    }
});

$(window).scroll();

source d'informationauteur DelPiero

  1. 17

    Je voudrais utiliser le ajaxStop méthode.

    $("img.lazy").lazyload({ 
    effect: "fadeIn" 
}).removeClass("lazy");
$(document).ajaxStop(function(){
    $("img.lazy").lazyload({ 
        effect: "fadeIn" 
    }).removeClass("lazy");
});

    removeClass empêche la double initialisation.

  2. 0

    En plus de Kevin B de la réponse, si vous voulez éviter ajaxStop jQuery définit maintenant une when() fonction pour cette fin

    //the following code will be executed when the ajax request resolve.
//the ajax function must return the value from calling the $.ajax() method.

    $.when(load_new_image(1), load_new_image(2), load_new_image(3)).done(function(i1, i2, i3){

            if($('img.lazy').length){

                 $('img.lazy').lazyload({ 

                          effect:'fadeIn'

                 }).removeClass('lazy').addClass('lazyloaded');

            }

        });

        function load_new_image(image_id) {

            return $.ajax({
                url: "someUrl",
                dataType: "json",
                data:  yourJsonData,            
                ...
            });
        }

    à partir de: http://api.jquery.com/jQuery.when/