使用Infinite Ajax Scroll實現下拉載入效果

摘要： 現在很多網頁都有個體驗不錯的效果：瀏覽到頁面底部的時候，自動載入下一頁內容，也就是下拉載入效果，這種效果可以讓使用者不用點選“下一頁”按鈕，也可以實現翻頁，無論在PC還是手機上，體驗效果都很不錯，下面我就介紹一下網站開發的時候如何實現下拉載入效果。 首先去 infiniteajaxsc...

現在很多網頁都有個體驗不錯的效果：瀏覽到頁面底部的時候，自動載入下一頁內容，也就是下拉載入效果，這種效果可以讓使用者不用點選“下一頁”按鈕，也可以實現翻頁，無論在PC還是手機上，體驗效果都很不錯，下面我就介紹一下網站開發的時候如何實現下拉載入效果。

首先去 infiniteajaxscroll網站 下載一個名為jquery-ias.min.js的檔案，這個js檔案需要jquery支援，一般的網站主題都會引入jquery庫，沒有的話就手動加一個jquery庫。

Infinite Ajax Scroll目前的版本是2.3.0，個人使用者可以免費使用。

之後確認一下網站的框架結構，找到四個元素的id或名稱：內容塊、內容條目、導航欄、下一頁。

Infinite Ajax Scroll支援按照ID取值和按照class取值，ID就在名稱前加#，class就在名稱前加。符號。編輯jquery-ias.min.js檔案，在檔案尾部加入配置引數程式碼即可。

舉個例子。

一個頁面的內容如下：

<div class="container">

<div class="item">...</div>

<div class="item">...</div>

</div>

<div id="pagination">

<a href="page1.html">1</a>

<a href="page2.html" class="next">2</a>

</div>

則 Infinite Ajax Scroll 需要增加的程式碼如下：

var ias = $.ias({

container:  ".container",

item:       ".item",

pagination: "#pagination",

next:       ".next a"

});

// Add a loader image which is displayed during loading

ias.extension(new IASSpinnerExtension());

上面程式碼最後一行是在載入的時候顯示一個載入圖示，不加也可以。

對於WordPress來說，不同的模板修改修改的引數不同，但大多數直接設定即可正常工作。

對於Z-Blog來說，就不行了，因為裡面沒有下一頁的標記，需要修改程式碼，開啟c_system_lib.asp檔案，找到下面一行：

Template_PageBar=Template_PageBar & "<span class=""page now-page"">" & i & "</span>"

在下面增加如下幾行

elseif i=intNowPage + 1 then

strPageBar=Replace(strPageBar,"<#pagebar/page/url#>",s)

strPageBar=Replace(strPageBar,"<#pagebar/page/number#>","<span class=""page"">"&i&"</span>")

strPageBar=Replace(strPageBar,"page-numbers","page-numbers next-page")

Template_PageBar=Template_PageBar & strPageBar

之後就有了下一頁的選擇器next-page了。