Связывание изображения ленивая загрузка новых изображений, вставленных после запроса ajax

Я использую плагин Mika Tuupola Lazy Load http://www.appelsiini.net/projects/lazyload, чтобы отложить загрузку изображений при прокрутке вниз по длинной галерее изображений. Проблема состоит в том, что после 10 изображений я использую бесконечную прокрутку, поэтому я получаю следующие 10 изображений и добавляю их через ajax. Lazy Loading больше не работает в этой следующей партии добавленных изображений.

Это довольно javascript-тяжелая галерея изображений, поэтому для всего остального (например, всплывающие подсказки, модальные оверлеи и т.д.) я использую делегат jQuery() для привязки к элементам, вставленным в ajax. Проблема с плагином Lazy Load заключается в том, что я не уверен, к какому событию нужно привязываться.

Так сказать, я хочу, чтобы ленивые загрузки изображений с классом "ленивый". Я бы написал следующее:

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

и он работает для первых 10 изображений, но перестает работать после добавления большего количества через ajax. Единственное, о чем я могу думать, это использовать делегат в событии load, например:

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

но это нарушает все. Спасибо!

EDIT: JQuery, который я использую для загрузки большего количества записей (это приложение 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();

Ответ 1

Я бы использовал метод ajaxStop.

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

removeClass предотвращает двойную инициализацию.

Ответ 2

В дополнение к Kevin B ответ, если вы хотите избежать ajaxStop jQuery теперь определяет функцию when() для этой цели

// 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,            
                ...
            });
        }

from: http://api.jquery.com/jQuery.when/