Hi 您目前尚未登陆
请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

上官雨伦

2006年接触 Discuz。原 New.Discuz! Support Team 开发团队负责人,致力于网页前端设计。现职河北省张家口市职业技术学院教师。

jQuery无限加载(实时加载、不刷新页面) heatlevel

2017-12-15 00:22:27 发布

Discuz /[教程] 1031 0 0

上官雨伦Writer

张家口市 | 博主、教师

90

主题

99

帖子

99

积分

Admin

Rank: 16

积分
99
发表于 2017-12-15 00:22 | 显示全部楼层 |阅读模式 [离线请留言]
利用的是 jquery.ias.min.js 封包插件。
这个插件和已往发布的翻页、点击加载不同之处在于,这个插件并非是伪加载。而是根据滚动条与页底的距离实时载入数据。
也可以理解成:将本是第二页的内容在不刷新页面的情况下当滚动条达到页底距离时,继续往下载入。

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

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

0 使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

当前话题还没有评论,来做第一个评论的人吧 ♪(^∇^*)