Question

我知道这个主题在这个网站上溢出但是当我使用下面的无限滚动插件时，我希望找到一种方法，只是从我的ajax请求加载但不知何故只是在某个时候结束。例如最终到达底部？非常感谢任何帮助？

     <script type="text/javascript">
$(window).scroll(function()
{
    if($(window).scrollTop() == $(document).height() - $(window).height())
{
    $('div#loadmoreajaxloader').show();
    $.ajax({
    url: "{{url('contentpage')}}",
    success: function(html)
    {
        if(html)
        {
            $("#postswrapper").append(html);
            $('div#loadmoreajaxloader').hide();
        }else
        {
            $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
        }
    }
    });
    }
});
</script>

Answer 1

试试这个，

var cp = 1;
var pagestotal = $("div.page-nav").find("a.pag:last").text();

function() {  // Optional callback when new content is successfully loaded

        cp++;

        if(cp == pagestotal) {

            $(window).unbind('.infscr');

        } else {}

Answer 2

如果没有要显示的内容，请将标志设置为false。

所以要做到这一点：

<script type="text/javascript">
   var postToShowFlag = true;
    $(window).scroll(function() {
      if (postToShowFlag) {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
          $('div#loadmoreajaxloader').show();
          $.ajax({
            url: "{{url('contentpage')}}",
            success: function(html) {
              if (html) {
                $("#postswrapper").append(html);
                $('div#loadmoreajaxloader').hide();
              } else {
                $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
                postToShowFlag = false;
              }
            }
          });
        }
      }
    });
 </script>

Answer 3

要实现无限滚动行为，您只需要 Pure Css OR Css & Javascript（这取决于浏览器支持和您的受众）

但是...不要使用onScroll：您可以只使用Vanilla Javascript和IntersectionObserver API来完成所有这些操作。

您需要做的就是放置元素并在它们在屏幕上可用时进行监听。 IntersectionObserver API 可高度自定义以满足您的所有需求。

总而言之：您使用几行 javascript 和 html 行即可完成此操作，并且它比在浏览器中侦听滚动事件的性能要高得多

我最近整理了一篇关于无限滚动的文章check it out here

我希望它能为您提供满足您特定需求的指南

如何结束JQuery无尽的滚动

3 个答案: