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

IT技术 javascript jquery pagination scroll
2021-03-11 23:46:37

我想要一个事件在用户滚动并到达几乎页面底部时加载更多内容，比如说离底部大约 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();
   }
});

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

3个回答

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

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

js小提琴

 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);
这正是您上面代码中的内容，我没有更改任何内容。它一定是我的一个 javascript 文件中的某个东西干扰了它或其他东西，我不太确定，因为它在您的 jsFiddle 中确实可以完美运行。
2021-04-20 23:46:37
非常有用，但是如果您按键盘上的“结束”，它会卡在页面底部并不断触发 loadMore。当我这样做时会找到解决方案并编辑答案
2021-04-25 23:46:37
是的，这似乎在小提琴中正常工作，但是我试图让它在我的网站上工作，但是控制台一直说 $(window).scroll(bindScroll); 有一个语法错误，因为它是一个非法字符。这使我的整个网站无法正确加载。（它完全加载了我的ajax）
2021-04-26 23:46:37
使用loadMore()函数中的更多代码更新您的问题。问题应该出在某处。
2021-05-02 23:46:37
嗯，这看起来不错，但我不太确定，除非绝对必要，否则我不喜欢使用计时器等。必须有更好的解决方案。
2021-05-17 23:46:37

这会帮助你。

<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 页面末尾时加载更多内容

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

其它你可能感兴趣的问题
上一篇如何从 NodeJs 调用 python 脚本 下一篇实现 jquery UI 自动完成以在您键入“@”时显示建议