Question

我想使用infinitescroll.js.

在页面上加载更多内容

脚本：

$('.wrapper').infinitescroll({

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

第1页：

<h2>Graffiti</h2>

<ul class="page">
    <li><a href="assets/img/graffiti/1.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/1.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/2.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/2.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/3.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/3.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/4.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/4.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/5.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/5.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/6.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/6.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/7.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/7.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/8.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/8.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/9.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/9.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/10.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/10.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/11.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/11.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/12.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/12.jpg" alt=""></a></li>
</ul>

<nav id="page-nav">
    <a href="?page=graffiti/graffiti2"></a>
</nav>

第2页：

<h2>Graffiti</h2>

<ul class="page">
    <li><a href="assets/img/graffiti/13.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/13.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/14.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/14.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/15.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/15.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/16.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/16.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/17.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/17.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/18.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/18.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/19.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/19.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/20.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/20.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/21.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/21.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/22.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/22.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/23.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/23.jpg" alt=""></a></li>
    <li><a href="assets/img/graffiti/24.jpg" rel="lightbox[graffiti]"><img src="assets/img/graffiti/thumbs/24.jpg" alt=""></a></li>
</ul>


<nav id="page-nav">
<a href="?page=graffiti/graffiti3"></a>
</nav>

等。但插件只加载第一页。

如何使用标记来加载多个页面？

Answer 1

为什么不直接增加从服务器获取的资源限制？而不是每页12个元素，你得到24个，技术上是你想要的2个页面，对吗？

加载多个页面 - Infinite Scroll JS

1 个答案: