欢迎使用QQ帐号登录 雨伦博客
jQuery无限加载(实时加载、不刷新页面)
上官雨伦Writer

发表于 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());
您需要登录后才可以回帖 登录 | 立即注册

回帖后跳转到最后一页

当前话题还没有评论,来做第一个评论的人吧