web-dev-qa-db-ja.com

ajaxを使用したjquerylazyload

私はeコマースWebサイトでlazyload（）を使用しています。 lazyload（）はうまく機能します。私はそれを行うためにこのコードを使用します：

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

また、ajaxを実行して新しい結果を表示する、色、価格などのフィルターもあります。新しい結果が来ると、lazyload（）は機能しません。 live（）、delegate（）、またはon（）でlazyload（）を使用する必要があることを知っています。しかし、私はjqueryの初心者であり、それはできませんでした。誰か助けてくれませんか？私のjqueryのバージョンは1.7.2で、on（）を使用できます。

jqueryajaxlazy-loading
9
tebdilikiyafet

注：この回答が受け入れられた時点で、これは機能していました。遅延読み込みプラグインが変更され、壊れています。答えを受け入れることも削除することもできません。

追加のDOMの挿入を担当するAJAXリクエストの一部として処理することを提案する別のQ＆Aがあります。

画像の遅延読み込みをajaxリクエストの後に挿入された新しい画像にバインドする

しかし、これは私がそれを行う方法です：

$(document).on('DOMNodeInserted', 'img.lazy', function() {
    $(this).lazyload({
        effect: 'fadeIn'
    });
});

デモ： jsfiddle

1
Cymen

簡単に言えば、最適化された最適な方法これを行うにはajaxの成功でlazyloadを呼び出す関数：

$.ajax({
    url: "your url here",
    type: "Post",
    success: function(response){
        // handle your success callback here
        $("img.lazy").lazyload({ 
              effect : "fadeIn"
        });
    }
});

しかし、呼び出しを集中化する lazyloadプラグインにしたい場合は、2つのオプション：があります。

最初：（パフォーマンスが低下するためお勧めしません）

$(document).on('DOMNodeInserted', '#container', function() {
    $("img.lazy").lazyload({
        effect: 'fadeIn'
    });
});

ただし、ここで「#container」に注意してください。これは、新しくロードされたものを表示するコンテナのセレクタです。したがって、上記のコードは、このコンテナ内で新しく追加されたものをリッスンして、新しいイメージでlazyloadを再度実行します。

2番目：（推奨）

JQueryに追加してカスタムlazyloadを呼び出す：

$.fn.myLazyLoad = function() {
    this.lazyload({ 
          effect : "fadeIn"
    });
};

次に、すべてのAJAXリクエストでそれを呼び出します：

$.ajax({
    url: "your url here",
    type: "Post",
    success: function(response){
        // handle your success callback here
        $("img.lazy").myLazyLoad();
    }
});
5
AbdelHady

ウィンドウの読み込み後に読み込まれた画像のLazyload（AJAXなど）は、スクロールイベントの前に画像を表示しません。これは、ウィンドウのロードイベントの後に初期更新をトリガーするように内部的にハードコードされているためです。上記の答えはすべて、今のところ間違っています。

1
Mark

AbdelHadyの回答に加えて、成功時にコールバックとして新しい画像を遅延読み込みするか、次のようにwhen()を使用できます。

   $.when(load_new_image()).done(function(i){

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

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

                          effect:'fadeIn'

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

            }

        });

        function load_new_image() {

            return $.ajax({
                url: "your url here",
                type: "Post",
                success: function(response){

                     //append new content
                    $('#container').append(response);

                }
            });
        }

NOTA BENE

1
RafaSashi

遅延読み込み画像でウェイポイントの無限スクロールを使用すると、同じ問題が発生します。 （ただし、ajaxコンテンツでは機能しません）。

そして私はこれでその問題を修正しました：

$("img.lazy").lazyload({
    effect : "fadeIn",
    event: "scrollstop",
    skip_invisible : true
}).removeClass('lazy');

$(document).bind('DOMNodeInserted', function(e) {
    $("img.lazy").lazyload({
        effect : "fadeIn",
        event: "scrollstop",
        skip_invisible : true
    }).removeClass('lazy');
});

DOMNodeInsertedイベントで遅延ロード構成をバインドします。

0
antoniputra