jQuery无限加载（实时加载、不刷新页面）

来自版块: Discuz教程发表于: 2020-4-16 13:23:36

18060

0

如本资源下载地址失效,请点击此处进行反馈

开通本站Svip会员，全站资源免费下

利用的是 jquery.ias.min.js 封包插件。
这个插件和已往发布的翻页、点击加载不同之处在于，这个插件并非是伪加载。而是根据滚动条与页底的距离实时载入数据。
也可以理解成：将本是第二页的内容在不刷新页面的情况下当滚动条达到页底距离时，继续往下载入。

<script type="text/javascript">
var ias = jQuery.ias({
container: ".footslist", //包含所有文章的元素
item: ".footprints", //文章元素
pagination: ".pg", //分页元素
next: ".pg a.nxt", //下一页元素
});
ias.extension(new IASTriggerExtension({
text: '<p>查看更多阅读记录</p>', //此选项为需要点击时的文字
offset: 3, //设置此项后，到 offset+1 页之后需要手动点击才能加载，取消此项则一直为无限加载
}));
ias.extension(new IASSpinnerExtension());
ias.extension(new IASNoneLeftExtension({
text: '<div class="mtw">没有更多了</div>', // 加载完成时的提示
}));
ias.extension(new IASSpinnerExtension());
ias.extension(new IASPagingExtension());
ias.extension(new IASHistoryExtension());
</script>

复制代码

须要注意的几个地方：
一。封包插件会自动为 pagination: ".pg",添加：style="display: none;"
二。如果不需要手动点击，直接删除 offset: 3,
三。如果不需要地址栏自动添加翻页地址，删除如下三行

ias.extension(new IASSpinnerExtension());
ias.extension(new IASPagingExtension());
ias.extension(new IASHistoryExtension());

jQuery，加载，刷新，页面

回复

全部评论 0

期待你的评论哦~

教程 / CSS+DIV素材

Discuz教程
CSS+DIV素材

返回版块

0

0

0