当滚动到页面底部减去100像素时，使用jQuery加载内容，会触发多个事件

Question

当滚动到页面底部减去100像素时，使用jQuery加载内容，会触发多个事件

13

当用户滚动并且接近页面底部，比如说距离页面底部100像素时，我希望能够加载更多的内容。问题在于当你在页面下方的这最后100像素内滚动时，事件会被触发多次，这显然是一个不能发生的问题，因为很明显会出现问题。所以我想知道应该如何解决这个问题。我查看了其他答案和问题，但是部分有效的解决方案并不符合我的需求。而当我尝试修改它以适应我的需求时，浏览器每次都会完全冻结。

这是问题的链接：检查用户是否已经滚动到底部我正在查看的答案在页面底部附近，但这里是他建议的代码：

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

现在正如我所说的，这确实有效并可以防止多个事件被触发，问题是我需要不断重复触发无限数量的事件，比如当你滚动到底部时，我加载了100行信息，但仍有1500个，我需要每次重复加载每个信息量（每次达到页面底部的100像素部分）。

所以我尝试过的方法是:

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

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

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

- Dylan Cross

与先前问题相关当用户滚动到页面末尾时使用jQuery .load()函数 - rds

3个回答

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在浏览器滚动到页面底部时加载更多内容

- Rohit

0

我曾经遇到过同样的问题。为了解决它，我使用underscore.js库来防止多个事件同时触发。这是链接http://underscorejs.org/#throttle。

- Filix Mogilevsky

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JoeFletch · Accepted Answer

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

更新：我查看了代码，我认为在重新绑定时，你缺少要重新绑定的函数。

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);