看到很多新聞資訊網(wǎng)站使用無限延遲加載、無限下拉功能，看著就帥氣，逼格高一個(gè)檔次。無限下拉的方式來避免用戶通過點(diǎn)擊下一頁來獲取更多內(nèi)容。比如今日頭條網(wǎng)站，打開后，可以一直向下滾動(dòng)，當(dāng)滾動(dòng)到頁面底部后，就會(huì)加載更多新聞條目。如果你的網(wǎng)速不夠快，可以看到底部會(huì)偶爾會(huì)顯示“推薦中”的加載提示。
今天我們使用的是jquery-ias.min.js完成功能，Infinite Ajax Scroll 簡稱 ias，無限的ajax滾動(dòng)，是一款jQuery滾動(dòng)ajax分頁插件，當(dāng)頁面滾動(dòng)到容器可見部分將自動(dòng)異步加載數(shù)據(jù)。
插件說明
炒雞簡單，不用改動(dòng)程序內(nèi)核文件，不用懂php代碼
支持“加載更多”
支持“無限下拉”
支持動(dòng)靜態(tài)
支持圖片延遲加載
插件的集成很簡單，分以下幾個(gè)步驟：
1、頁面中引用jquery-1.8.0.min.js 和 jquery-ias.min.js
注意：jquery.js庫版本必須大于1.6
<script src='/style/js/jquery-1.8.0.min.js'></script>
<script src="/style/js/jquery-ias.min.js"></script>
jquery-ias.min.js 及 jquery-1.8.0.min.js
下載鏈接: 鏈接：https://pan.baidu.com/s/1nNrjeX2zPvzGsXLPIC80zw 提取碼：8s53
2、接著上面的js，在頁面中寫上插件參數(shù)
|
<script type="text/javascript"> var ias = $.ias({ container: ".listbox", //包含所有文章的元素 item: ".item", //文章元素 pagination: ".pagelist", //分頁元素 next: ".pagelist a.nextpage", //下一頁元素 }); ias.extension(new IASSpinnerExtension({ src: "/skin/images/load.gif", //此選項(xiàng)為加載時(shí)緩沖圖片 html: '<p style="text-align: center;"><img src="{src}"/></p>' })); ias.extension(new IASTriggerExtension({ text: '點(diǎn)擊加載更多', //此選項(xiàng)為需要點(diǎn)擊時(shí)的文字 html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>', offset: !1, //設(shè)置此項(xiàng)，如 offset:2 頁之后需要手動(dòng)點(diǎn)擊才能加載，offset:!1 則一直為無限加載 })); ias.extension(new IASNoneLeftExtension({ text: '已經(jīng)加載完成！', // 加載完成時(shí)的提示 html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>', })); </script> |
3、dedecms列表模板html代碼示范，注意html代碼中的 listbox、item、pagelist、nextpage 要與上面js中的統(tǒng)一
<div class="listbox">
<ul class="e2">
{dede:list pagesize='10'}
<li class="item"><a href="[field:arcurl/]" class="title">[field:title/]</a></li>
{/dede:list}
</ul>
</div>
<ul class="pagelist">
{dede:pagelist listitem="next" listsize="1" runphp=yes}
@me = preg_replace('/<ashref=(['"]?).+?/', '$0 class="nextpage"', @me);
{/dede:pagelist}
</ul>
