首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >jQuery InfiniteScroll插件一遍又一遍地加载最后一个页面

jQuery InfiniteScroll插件一遍又一遍地加载最后一个页面
EN

Stack Overflow用户
提问于 2012-02-20 03:22:03
回答 3查看 5.7K关注 0票数 2

我使用的是following jQuery InfiniteScroll插件,它确实可以工作,但会一次又一次地加载最后一个页面,它无法停止。下面是我使用的代码:

代码语言:javascript
复制
$('#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
}); 

我的分页如下所示:

代码语言:javascript
复制
<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>
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-02-20 05:32:49

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

代码语言:javascript
复制
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 {}

});

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

票数 6
EN

Stack Overflow用户

发布于 2020-05-26 23:34:45

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

票数 0
EN

Stack Overflow用户

发布于 2016-06-07 23:36:13

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

代码语言:javascript
复制
maxPage: "<?php echo $_productCollection->getLastPageNumber(); ?>",
票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9352389

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档