滚动到页面底部 100px 时，jQuery 加载内容，触发多个事件

Posted 2023-03-10

【中文标题】滚动到页面底部 100px 时，jQuery 加载内容，触发多个事件

【英文标题】：jQuery load content when scroll to bottom-100px of page, multiple events fired

【发布时间】：2012-10-25 14:38:58

【问题描述】：

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

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

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

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

【问题讨论】：

与上一个问题相关using jQuery .load() when user scrolls to the end of page

【参考方案1】：

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

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

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

【讨论】：

嗯，看起来不错，但我不太确定，除非绝对必要，否则我不喜欢使用计时器等。一定有更好的解决方案。

是的，这似乎可以在小提琴中正常工作，但是我试图让它在我的网站本身上工作，但是控制台一直说 $(window).scroll(bindScroll );​ 有一个语法错误，因为它是一个非法字符。这使我的整个网站无法正确加载。 （它完全加载了我的 ajax）

使用来自loadMore() 函数的更多代码更新您的问题。问题应该出在某个地方。

这正是你上面的代码，我没有改变任何东西。它一定是我的一个 javascript 文件中的某个东西干扰了它或其他东西，我不太确定，因为它在你的 jsFiddle 中可以完美运行。

非常有用，但是如果您按键盘上的“结束”，它会卡在页面底部并一直触发 loadMore。当我这样做时会找到解决方案并编辑答案

【参考方案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>

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

load more content when browser scroll to end of page in jquery

【参考方案3】：

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