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

发布于 2025-01-07 02:09:25 字数 1436 浏览 0 评论 0原文

我正在使用 以下 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>

I'm using the following jQuery InfiniteScroll plugin which actually works but keeps loading the last page over and over, it can't be stopped. Here's the code which I use:

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

And my pagination looks like the following:

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

八巷 2025-01-14 02:09:25

好的。这实际上并不是无限滚动插件中的错误。情况是,如果没有这样的页面可用,我的脚本不会返回 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 {}

});

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

OK. That was not actually a bug in the Infinite Scroll plugin. The case is that my script did not return a 404 error if there was not such a page available. It simply returned the last page which was being appended to the content over and over. To solve this issue I've stored the number of all pages I had and wanted to show, incremented a variable after each content load and unbinded the scrolling once all the pages were loaded successfully. The code is below:

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 {}

});

I hope this will help somebody else.

木緿 2025-01-14 02:09:25

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

Check the documentation on the checkLastPage property. If you set that to a class that is defined within your ahref and then add logic in your server side code to ensure that the entire ahref doesn't appear on the last page of the search results then this will work.

¢蛋碎的人ぎ生 2025-01-14 02:09:25

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

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

Just a handy hint but if you are doing this on a Magento category product listing page, you can add the following to limit the pages loaded to the correct maximum

maxPage: "<?php echo $_productCollection->getLastPageNumber(); ?>",
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文