13

我希望一个事件在用户滚动并几乎到达页面底部时加载更多内容，例如距离底部大约 100 像素，问题是每次滚动页面较低的 100 像素时都会触发事件，因此，由于显而易见的原因，这是一个不可能发生的明显问题，所以我想知道如何才能做到最好，我已经在此处检查了其他答案/问题，但是部分有效的解决方案不适合我需要的要做，当我尝试更改它时，它每次都会完全冻结我的浏览器。这是问题： 检查用户是否滚动到底部

我正在查看的答案接近底部，但这是他建议的代码：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});

现在就像我说的那样，这确实有效并且可以防止多个事件被触发，问题是我需要触发无数个事件，比如当你到达底部时我加载了 100 行信息，但还有 1500 多行，我需要它每次都重复加载每一个信息量（一旦你每次到达页面的底部 100px 部分）

所以我试图做的是：

 function loadMore()
{
   alert("More loaded");
   $(window).bind('scroll');
 }

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       loadMore();
   }
});

就像我说的那样，每次绑定部分都会立即冻结我的浏览器。

4

3 回答 3

37

我也有同样的问题。我遇到了这个链接，它真的很有帮助（并且有效）！

更新：我查看了代码，我认为当您重新绑定时，您缺少要重新绑定的功能。

jsFiddle

 function loadMore()
{
   console.log("More loaded");
    $("body").append("<div>");
   $(window).bind('scroll', bindScroll);
 }

 function bindScroll(){
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       loadMore();
   }
}

$(window).scroll(bindScroll);
于 2012-11-05T17:56:39.740 回答
2

这将对您有所帮助。

<script type="text/javascript">
var sIndex = 11, offSet = 10, isPreviousEventComplete = true, isDataAvailable = true;

$(window).scroll(function () {
 if ($(document).height() - 50 <= $(window).scrollTop() + $(window).height()) {
  if (isPreviousEventComplete && isDataAvailable) {

    isPreviousEventComplete = false;
    $(".LoaderImage").css("display", "block");

    $.ajax({
      type: "GET",
      url: 'getMorePosts.ashx?startIndex=' + sIndex + '&offset=' + offSet + '',
      success: function (result) {
        $(".divContent").append(result);

        sIndex = sIndex + offSet;
        isPreviousEventComplete = true;

        if (result == '') //When data is not available
            isDataAvailable = false;

        $(".LoaderImage").css("display", "none");
      },
      error: function (error) {
          alert(error);
      }
    });

  }
 }
 });
 </script>

通过此链接查看整篇文章并详细说明如何触发多个事件。

当浏览器滚动到jQuery中的页面末尾时加载更多内容

于 2013-05-28T12:49:40.667 回答
0

我有同样的问题。为了解决这个问题，我使用 underscore.js 库来防止触发多个事件。链接在这里。http://underscorejs.org/#throttle

于 2013-08-19T21:54:37.043 回答