加載多個頁面-Infinite Scroll JS

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頁，對嗎？