Javascript 加载多个页面-无限滚动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>

涂鸦

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

---

如何更改标记以加载多个页面？

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

我实际上总共有6页。那就是3页，每页24个元素。是的，但我不明白为什么每页24个元素对我有帮助。我的问题是，只有第二个页面由infinitescroll.js加载，而其他页面根本不加载。