10

MikaTuupolaのLazyLoadプラグインhttp://www.appelsiini.net/projects/lazyloadを使用して、長い画像ギャラリーを下にスクロールするときに画像の読み込みを遅らせています。問題は、10枚の画像の後で、無限スクロールを使用するため、次の10枚の画像をフェッチし、ajaxを介してそれらを追加することです。遅延読み込みは、追加された画像のこの次のバッチでは機能しなくなりました。

これはかなりJavaScriptが多い画像ギャラリーなので、他のすべて（ツールチップ、モーダルオーバーレイなど）については、jQueryのdelegate（）を使用してajaxが挿入された要素にバインドしています。Lazy Loadプラグインの問題は、バインドするイベントがわからないことです。

つまり、「lazy」のクラスで画像を遅延ロードしたいとします。私はこれを書きます：

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

最初の10枚の画像では機能しますが、ajaxを介してさらに挿入すると機能しなくなります。私が考えることができる唯一のことは、次のように、ロードイベントでデリゲートを使用することです。

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

しかし、それはすべてを壊します。ありがとう！

編集： より多くのレコードをロードするために使用する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();
4

2 に答える 2

17

私はそのajaxStop方法を使います。

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

removeClass二重初期化を防ぎます。

于 2012-04-05T21:16:52.377 に答える
0

回避したい場合のKevinBの回答に加えて、ajaxStopjQueryは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,            
                ...
            });
        }

差出人：http ：//api.jquery.com/jQuery.when/

于 2014-10-20T20:55:46.803 に答える