jQueryのAjaxのLazyLoad

Question

からロードされた新しいイメージのために、私はこのコードを持っているが、最初にロードされたイメージのために動作します：

<script> 
    $(document).ready(function() { 
     $("img.lazy").lazyload({ 
      effect : "fadeIn", 
      threshold : 200 
     }); 
    }); 
</script> 

が、AJAXからロードされた新しいイメージのため、それが働いていません。私はイベントの委任を使って読みました、それは新しい読み込まれたイメージに適用することができます。

https://learn.jquery.com/events/event-delegation/

が、私はこれに私のコードを変更しようとしたとき：

<script> 
    $(document).ready(function() { 
     $("img.lazy").lazyload(function(event) { 
      effect : "fadeIn", 
      threshold : 200 
     }); 
    }); 
</script> 

は、それがすべてlazyloadはもう機能していないことができます。この場合、イベント委任を正しく添付する方法は？ありがとうございました。

Answer 1

あなたはjQueryのグローバルAjaxのイベントハンドラ.ajaxSuccess()を使用することができます。

この機能は、Ajaxリクエストが正常に完了すると実行されます。

AJAXレスポンスがプレーンHTMLであると仮定して、このようなことを試してください。 レスポンス内のクラス.lazyを持つすべての画像を検索し、lazyload()関数をバインドします。

$(document).ajaxSuccess(function(event, xhr, settings) { 

    // the response in stored in `xhr.responseText` 
    $(xhr.responseText).find('img.lazy').lazyload({ 
     effect : "fadeIn", 
     threshold : 200 
    }); 

}); 

あなたはグローバルAjaxのイベントハンドラここ詳細を読むことができます： https://api.jquery.com/category/ajax/global-ajax-event-handlers/

Answer 2

私の経験では、Ajaxで読んだ要素でjavascriptを実行するコールバック関数が必要です。例えば

：

var listname = []; 


$.ajax({ 
    url : wedding, // change to your local url or url on the same domain, this not work with absolute url 
    success: function (data) { 
     callback(data); 
    } 
}); 

function callback(data) { 
     $(data).find("a").attr("href", function (i, val) { 
      if(val.match(/\.(jpe?g|png|gif)$/)) { 
      // $('#displayImage1').append("<img src='" + wedding + val +"'>"); 
       listname.push(val); 
      } 
     }); 
}