lazyload jquery |只要 scroll 到最下面,會不斷跟後端請求,但明明已經沒有數據?

$(window).scroll(function(){
  var WindowHeight = $(window).height();

  if($(window).scrollTop() >= $(document).height() - WindowHeight){

    $('#loader').html('<img src="../images/loading_v2.svg">');

    var LastDiv = $(".data-display:last");
    var LastId  = $(".data-display:last").attr("id");
    var ValueToPass = "lastid="+LastId;

    $.ajax({
      type: "POST",
      url:"/module/user/order/lazyload.app",
      data: ValueToPass,
      cache: false,
      success: function(data){
        if(data != ''){
          LastDiv.after(data);
        }else{
          $('#loader').html('沒有更多。');
        }
      }
    });
  }
  return false;
});

好怪的現象,不知道哪裡寫錯了
只要 scroll 到最下面,會不斷跟後端請求,但明明已經沒有數據,必須要稍微往上 scroll 一點,才會出現 沒有更多。
不然他就會一直出現 「<img src="../images/loading_v2.svg">」 loading 圖,然後消失,然後又出現 loading 圖,又消失,不斷重複

阅读 2.1k
2 个回答

这段代码本身并没有判断没有数据的时候不再触发加载., 像楼上说的可以加个标志判断.
比如在scroll最顶部加上:

if($('#loader').hasClass('nomore')) {
    return false;
}

在请求无数据时:

$('#loader').addClass('nomore').html('沒有更多。');

本身还需要加另一个标志,是否在加载中.

...可能是滚动的太猛,scroll触发多次,造成多次请求。设置个标志位试试,每次请求前检查标志位,判断是否正在请求,scroll加throttle函数。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题