织梦无限下拉插件支持动静态和图片延迟加载

Infinite Ajax Scroll 插件简介

Infinite Ajax Scroll 简称 ias，是一款基于 jQuery 的滚动 Ajax 分页插件。当页面滚动到容器可见部分时，插件将自动异步加载数据，实现无缝翻页体验。

插件核心特性

无需修改程序内核文件，也无需掌握 PHP 代码即可集成使用。插件支持“加载更多”按钮触发模式，也支持“无限下拉”自动加载模式，兼容动态页面与静态页面，同时具备图片延迟加载功能。

插件集成步骤

插件的集成非常简单，主要分为以下几个步骤：

第一步：引用核心库文件

在页面中引入 jQuery 库和 jquery-ias.min.js 文件。注意：jQuery 库版本必须大于 1.6。

<script src='/js/jquery.js'></script>
<script src="/js/jquery-ias.min.js"></script>

jquery-ias.min.js 下载链接：

文件

第二步：配置插件参数

在页面中编写插件初始化参数，包括容器选择器、文章项选择器、分页元素选择器以及下一页按钮选择器。

<script type="text/javascript">
var ias = $.ias({
    container: ".listbox", //包含所有文章的元素
    item: ".item", //文章元素
    pagination: ".pagelist", //分页元素
    next: ".pagelist a.nextpage", //下一页元素
});
ias.extension(new IASSpinnerExtension({
    src: "/img/load.gif", //加载时缓冲图片
    html: '<p style="text-align: center;"><img src="{src}"/></p>'
}));
ias.extension(new IASTriggerExtension({
    text: '点击加载更多', //点击加载按钮文字
    html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',
    offset: !1, //设置 offset:2 表示第2页后需手动点击，offset:!1 为无限加载
}));
ias.extension(new IASNoneLeftExtension({
    text: '已经加载完成！', //加载完成提示
    html: '<p style="text-align: center; cursor: pointer;"><a>{text}</a></p>',
});
</script>

第三步：DedeCMS 列表模板 HTML 代码示例

以下为织梦 DedeCMS 列表模板的 HTML 代码示范。注意 HTML 代码中的 listbox、item、pagelist、nextpage 类名必须与上方 JavaScript 中的配置保持一致。

<!-- listbox 必须包含分页条 -->
<div class="listbox">
    <ul>
        {dede:list pagesize='10'}
        <li class="item"><a href="[field:arcurl/]" class="title">[field:title/]</a></li>
        {/dede:list}
    </ul>
    <ul class="pagelist">
        {dede:pagelist listitem="next" listsize="1" runphp=yes}
        @me = preg_replace('/<a\shref=([\'\"]?).+?\1/', '$0 class="nextpage"', @me);
        {/dede:pagelist}
    </ul>
</div>