2017-04-04 10 views
1

私は複数のajaxページを持っており、スクロール後に私のAjaxページをロードしたいのですが、どうすればいいですか?私は単純な基本構造を持ち、無限スクロールやレイジー画像のようなスクロールの後に私のajaxをロードしたい。スクロール後にajaxをロードするには?

$('.lazy_content').on('load', function (e) { 
 

 
      data_url = $(this).attr("data-url"); 
 
      data_id = $(this).attr("data-target-id"); 
 

 
      $.ajax({ 
 
       url: data_url, 
 
       type: "POST", 
 
       beforeSend: function() { 
 
        $(".loaderDiv").show(); 
 
        $("#" + data_id).html(""); 
 
       }, 
 
       success: function (data) { 
 
         $(data).each(function(index, el) { 
 
\t      $(".loaderDiv").hide(); 
 
\t      $("#" + data_id).html(data); 
 
       \t \t }); 
 
       } 
 

 
      }) 
 

 
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="lazy_content" data-url="/ajax/comments/aurum-didyma-spa-beach-resort" data-target-id="comments-content"> 
 
    <h4>COMMENTS</h4> 
 
    <div id="comments-content" class="content-target"></div> 
 
</div>

+0

はあなたをしましたtry http://jquery.eisbehr.de/lazy/? – Sami

+0

私はlazySizesプラグインを使用していますが、lazyをサポートしていません。lazyプラグインを変更することはできません。 –

+0

すぐに使用できる例をご覧ください:https://www.sitepoint.com/jquery-infinite-scrolling-demos/ これらのページでは、jQuery(プラグインなし)の例を見ることができます –

答えて

0

ジャスト要素(DIV)のイベントスクロールを追加します。あなたはその目的のためにネイティブJSイベントを持っている

$('.lazy_content').scroll(function() { 
     data_url = $(this).attr("data-url"); 
     data_id = $(this).attr("data-target-id"); 

     $.ajax({ 
      url: data_url, 
      type: "POST", 
      beforeSend: function() { 
       $(".loaderDiv").show(); 
       $("#" + data_id).html(""); 
      }, 
      success: function (data) { 
       $(data).each(function(index, el) { 
        $(".loaderDiv").hide(); 
        $("#" + data_id).html(data); 
       }); 
      } 
     }) 
}); 
+1

すべてのスクロール**イベント –

+0

にデータを読み込まないようにスクロール位置の条件を追加してください。ただし、ユーザーがボトムajax –

0

onscroll="myFunction" 
関連する問題