0

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>

など。ただし、プラグインは最初のページのみをロードします。

複数のページをロードするには、マークアップを変更するにはどうすればよいですか？

4

1 に答える 1

0

サーバーからフェッチされるリソースの制限を増やしてみませんか? 1 ページあたり 12 の要素ではなく、24 の要素が得られます。技術的には、これらが必要な 2 ページですよね?

于 2012-12-15T11:22:27.530 に答える