jQuery InfiniteScroll 插件一遍又一遍地加载最后一页答案

【问题标题】：jQuery InfiniteScroll plugin loads the last page over and overjQuery InfiniteScroll 插件一遍又一遍地加载最后一页
【发布时间】：2012-02-19 19:22:03
【问题描述】：

我正在使用following jQuery InfiniteScroll 插件，该插件实际上可以工作，但会一遍又一遍地加载最后一页，无法停止。这是我使用的代码：

$('#catalog').infinitescroll({
     
        navSelector  : "div.page-nav:last",            
                       // selector for the paged navigation (it will be hidden)
        nextSelector : "div.page-nav a.navnext:last",    
                       // selector for the NEXT link (to page 2)
        itemSelector : "#catalog div.single",          
                       // selector for all items you'll retrieve

        bufferPx     : 400
});

我的分页如下所示：

<div id="page-nav" class="page-nav"> 
    <div class="top">
        <a id="page-1" class="active">1</a>
        <a id="page-2" href="?page=2">2</a>
        <a id="page-3" href="?page=3">3</a>
        <a id="page-4" href="?page=4">4</a>
        <a id="page-5" href="?page=5">5</a>
        <a id="page-6" href="?page=6">6</a>
        <a id="page-7" href="?page=7">7</a>
        </div>
    <div class="bottom">
        <span class="right">
            <a class="navnext" href="?page=2" id="next-2">Next</a>
                <span class="next">Ctrl</span>
        </span>
    </div>
</div>

【问题讨论】：

否则它不会是“无限的”......

标签： jquery infinite-scroll

【解决方案1】：

好的。这实际上不是无限滚动插件中的错误。情况是如果没有这样的页面可用，我的脚本没有返回 404 错误。它只是返回了一遍又一遍地附加到内容的最后一页。为了解决这个问题，我存储了我拥有和想要显示的所有页面的数量，在每次内容加载后递增一个变量，并在所有页面成功加载后解除滚动绑定。代码如下：

var curPage = 1;
var pagesNum = $("div.page-nav").find("a.pag:last").text();   // Number of pages

$('#catalog').infinitescroll({

        navSelector  : "div.page-nav:last",            
                       // selector for the paged navigation (it will be hidden)
        nextSelector : "div.page-nav a.navnext:last",    
                       // selector for the NEXT link (to page 2)
        itemSelector : "#catalog div.line",          
                       // selector for all items you'll retrieve

        bufferPx     : 800

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

            curPage++;

            if(curPage == pagesNum) {

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

            } else {}

});

我希望这对其他人有帮助。

【讨论】：

在较新的版本中，您可以简单地包含参数maxPage: pagesNum（在定义 pagesNum 之后）而不是回调函数。

【解决方案2】：

检查 checkLastPage 属性的文档。如果将其设置为在 ahref 中定义的类，然后在服务器端代码中添加逻辑以确保整个 ahref 不会出现在搜索结果的最后一页上，那么这将起作用。

【讨论】：

【解决方案3】：

只是一个方便的提示，但如果您在 Magento 类别产品列表页面上执行此操作，您可以添加以下内容以将加载的页面限制为正确的最大值

maxPage: "<?php echo $_productCollection->getLastPageNumber(); ?>",

【讨论】：

也许这是旧版本插件中的有效答案，但该设置现在不存在。