Discuz模板|Discuz插件|Discuz教程|Discuz素材免费下载

 找回密码
 立即注册

QQ登录

只需一步,快速开始

广告
温馨提示:本站所有DZ相关模板、插件、教程(包括DZ应用中心已下架插件、模板)所有用户可全部免费下载,无任何收费模式(不包括VIP版块非DZ资源,VIP版块需购买会员组方可下载),如本站没有您需要的插件或模板,请自行前往淘宝互站网送吗网等第三方站点搜索相关插件或模板进行低价格购买下载本站非常不建议用户浪费金钱前往DZ应用中心购买。

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

[复制链接]
tuyuanma 发表于 2020-4-16 13:23:36 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


利用的是 jquery.ias.min.js 封包插件。
; e. |8 E8 c' }9 T5 F' P3 G; R这个插件和已往发布的翻页、点击加载不同之处在于,这个插件并非是伪加载。而是根据滚动条与页底的距离实时载入数据。
9 `( a& ^: e8 F9 f也可以理解成:将本是第二页的内容在不刷新页面的情况下当滚动条达到页底距离时,继续往下载入。
  1. <script type="text/javascript">
    3 _+ ^5 W/ U8 _! g
  2.     var ias = jQuery.ias({
    3 E: ?* p- T4 b1 P& f* ^* T8 O% X
  3.         container: ".footslist", //包含所有文章的元素
    4 }6 D* L! L& p6 I
  4.         item: ".footprints", //文章元素5 C) Q. Q# b6 Z4 z+ r
  5.         pagination: ".pg", //分页元素7 R7 w1 I  t5 d& T3 I
  6.         next: ".pg a.nxt", //下一页元素# F2 n  k! {( }8 T' z' w
  7.     });9 B+ g, s* Q* ^& j3 ?6 D2 [
  8.     ias.extension(new IASTriggerExtension({
    & N" q& ~# y- \
  9.         text: '<p>查看更多阅读记录</p>', //此选项为需要点击时的文字; e, a8 M5 [6 s/ T/ D. L/ ?
  10.         offset: 3, //设置此项后,到 offset+1 页之后需要手动点击才能加载,取消此项则一直为无限加载. {: X  `' p2 n( z
  11.     }));3 {8 q/ y" S3 N- v$ B
  12.     ias.extension(new IASSpinnerExtension());+ s+ e7 P! @, S( s5 u" P$ l2 U5 W
  13.     ias.extension(new IASNoneLeftExtension({( o* b1 D" R6 N
  14.         text: '<div class="mtw">没有更多了</div>', // 加载完成时的提示
    0 j; t" T, G5 \9 c$ E3 T, L
  15.     }));
    ; g) k5 G0 _0 y' o  v3 O/ U5 K4 l  W
  16.     ias.extension(new IASSpinnerExtension());8 ^* S* J2 _/ ^; t
  17.     ias.extension(new IASPagingExtension());( z1 ^( }/ O( R5 g4 O8 f
  18.     ias.extension(new IASHistoryExtension());
      w1 W9 Q. A% [' k3 k2 B
  19. </script>
复制代码
须要注意的几个地方:" h1 v& G* z* p5 \; u. \3 L# ?
一。封包插件会自动为 pagination: ".pg",添加:style="display: none;"" _- w7 U% [  d# s8 }2 g+ y
二。如果不需要手动点击,直接删除 offset: 3,( X9 x3 M$ y  z7 v3 {
三。如果不需要地址栏自动添加翻页地址,删除如下三行
" h- |2 v3 ?+ U" Y5 T
    ias.extension(new IASSpinnerExtension());
+ f5 l$ h( }) k6 |$ w- v2 N9 S' d    ias.extension(new IASPagingExtension());6 `3 V, i1 }2 F  h$ n2 e
    ias.extension(new IASHistoryExtension());

版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

广告
493651246站长邮箱:tuyuanma@qq.com 站长QQ:3197813386

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

快速回复 返回顶部 返回列表