ajax 加載更多內容相當普遍了，筆者在開發主題的過程中找了很多方法都不盡完美，jQuery.ias 插件是相對完美的一款。

ias 全稱是 Infinite Ajax Scroll，無限的 ajax 滾動，是一款 jQuery 滾動 ajax 分頁插件，當頁面滾動到容器可見部分將自動異步加載數據，筆者在開發網站時都會將這個插件集成到主題中。

插件的集成很簡單，分以下幾個步驟：

1 、網站中必須實現分頁，需要有下一頁鏈接，WP 網站可以通過分頁代碼或插件來實現；

2 、頁面中引用 jquery-ias.min.js

3 、插件參數：container 容器，所有文章的最外層元素，如下代碼中的 「content」：

  1. <section class="content">
  2.     <article class="post"></article>
  3.     <article class="post"></article>
  4.     <article class="post"></article>
  5.     <article class="post"></article>
  6. </section>

4 、插件參數：item 項，每一篇文章的最外層元素，如上代碼中的 「post」

5 、插件參數：wp-pagenavi 分頁，分頁代碼最外層元素，如下代碼中的 「wp-pagenavi」：

  1. <div class="wp-pagenavi">
  2.     <span class="pages"> 第 1 頁，共 2 頁</span>
  3.     <span class="current">1</span>
  4.     <a href="#" class="page">2</a>
  5.     <a href="" rel="next" class="nextpostslink"> 下一頁</a>
  6. </div>

6 、插件參數：next 下一頁，分頁代碼中的下一頁按鈕或鏈接，如上代碼中的 「nextpostslink」

7 、插件提示：加載更多，加載完成以及自動加載多少次後將手動點擊加載

注意：加載次數 (offset) 如果填寫 2 將自動加載一次，3 將自動加載兩次，所以 offset-1 等於自動加載的次數。有些文章介紹加載次數是 offset+1，筆者使用過程中都是 offset-1 次。

8 、添加 JS 代碼到你的 JS 文件中，代碼如下：

  1. <script type="text/javascript">
  2.     var ias = $.ias({
  3.         container: ".content",
  4.         item: ".post",
  5.         pagination: ".wp-pagenavi",
  6.         next: ".wp-pagenavi a.nextpostslink",
  7.     });
  9.     ias.extension(new IASTriggerExtension({
  10.         text: '加載更多',
  11.         offset: 2,
  12.     }));
  13.     ias.extension(new IASSpinnerExtension());
  14.     ias.extension(new IASNoneLeftExtension({
  15.         text: '已經加載完成！',
  16.     }));
  17.     ias.on('rendered', function(items) {
  18.         $(".content img").lazyload({
  19.             effect: "fadeIn",
  20.         failure_limit : 10
  21.         });
  22.     })
  23. </script>

要在加載更多後顯示的文章中支持圖片延遲加載，首選需要添加此圖片延遲加載功能。同時 jQuery ias 無限加載更多功能同樣合適商城產品列表。

 

後台都添加了插件提示文本與加載次數，ias 插件使用相當的方便，也很實用，大讚。