php 無限滾動加載,讓Typecho無限滾動加載的方法

讓Typecho無限滾動加載的方法

作者：佚名

來源：愛好者

時間：2017-11-24

據統計，據媒體報道，據各種經驗之談：使用者不喜歡點選，更愛滾動！是以，之前挺流行的文章分頁沒有了，沿用了幾百年的“下一頁”也被無限load取代。瀑布流和Twitter更是推動了無限load的普及。

這裡介紹一個jQuery插件：Infinite AJAX Scroll，通過這個插件能快速實作無限滾動翻頁。因為是jQuery是以到處都能用，這裡我們以Typecho作為例子。

第一步接入Infinite AJAX Scroll

下載下傳Infinite AJAX Scroll，放到對應主題的js檔案夾中。因為是jQuery插件，我們還要先連上jQuery。打開header.php頁面，插入如下代碼：

第二步為Typecho加上分頁

如果看官網文檔的話，它會告訴你分頁代碼用帶有數字清單的<?php $this->pageNav(); ?>。如果你用的是這個代碼，請務必換成<?php $this->pageLink('下一頁','next'); ?>。

步驟三調整代碼

把下面這段代碼插在步驟一代碼的後面即可，然後我們要做一些調整。

var ias = jQuery.ias({

container:  '#posts',    //大容器

item:       '.post',    //循環容器

pagination: '#pagination',    //分頁容器

next:       '.next'    //下一頁的class

});

ias.extension(new IASTriggerExtension({

text: '加載更多', //此選項為需要點選時的文字

offset: 2, //load多少頁後顯示加載更多按鈕

}));

ias.extension(new IASSpinnerExtension());    //加載時的圖檔

ias.extension(new IASNoneLeftExtension({text: "已經沒有文章了"}));    //到底後顯示的文字

我們需要把容器對應的id和class填上，

item指的是循環清單的容器，就是清單中的文章最外層div的id或者class

container是整個大容器，就是包裹文章清單的div的id或者class

pagination是分頁所在的容器，就是包裹分頁按鈕的div的id或者class

next是下一頁對應的class，就是分頁按鈕超連結的class

如果沒有id或者class，就自己加一個。為了更友善了解，我偷了個圖，基本就是這樣的

步驟四重載函數

因為文章可能含有縮略圖，而縮略圖可能會用到惰性加載的js，是以ajax加載文章後，縮略圖可能加載異常，這時我們需要在步驟三的代碼最後加上一條

ias.on('rendered', function(items) {

//你的重載函數

})

常見的惰性加載需要重載的函數

Lazyload

$("img.lazy").lazyload({effect:"fadeIn"}); //這裡是你調用Lazyload的代碼

blazy

;(function() {

// Initialize

var bLazy = new Blazy();

})();

參考：

http://www.19871222.com/infinite-ajax-scroll.html

https://salongweb.com/infinite-ajax-scroll.html

分享到：