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 外掛使用相當的方便，也很實用，大讚。