同乐儿

  1. 首页
  2. jquery专题
jQuery:Ajax分页加载简单使用前奏
发布 | 2年前 (2018-08-04) | 阅读数:1751 | 评论数:0 | 来源:同乐儿

已经有好久没发布教程类的文章了,以前也只不过是copy百度来的教程做一个记录,随后记录的是培训时的笔记,现在只要是有价值的文章,何必去区分是copy还是笔记,关键在于是否坚持过,可坚持二字,真的可以做到吗?

在主题中用到了分页加载,可还不是很熟悉,这里就把2中方法先记录下来,方便查阅。

1、首先载入jquery.ias.min.js文件,可以直接百度到下载链接;

2、然后下面代码是百度到的2种方法,任选其一即可:

(方法一“可能”出自舍力博客)

  1. var ias = $.ias({
  2.     container: "#content"/*包含所有文章的元素*/
  3.     item: ".tleajaxpage"/*文章元素*/
  4.     pagination: ".am-pagination"/*分页元素*/
  5.     next: ".am-pagination a#tlenextpage"/*下一页元素*/
  6. });
  7. ias.extension(new IASTriggerExtension({
  8.     text: '<div class="cat-nav am-round"><small>猛点几次查看更多内容</small></div>', /*此选项为需要点击时的文字*/
  9.     offset: 2, /*设置此项后,到 offset+1 页之后需要手动点击才能加载,取消此项则一直为无限加载*/
  10. }));
  11. ias.extension(new IASSpinnerExtension());
  12. ias.extension(new IASNoneLeftExtension({
  13.     text: '<div class="cat-nav am-round"><small>已经是全部内容了</small></div>', /*加载完成时的提示*/
  14. }));

或者

(方法二“可能”是jQuery原版)

  1. jQuery.ias({
  2.             history: false,
  3.             container : '#content',
  4.             item: '.tleajaxpage',
  5.             pagination: '.am-pagination',
  6.             next: '.am-pagination a#tlenextpage',
  7.             trigger: '猛点几次查看更多内容',
  8.             loader: ,
  9.             triggerPageThreshold: 5,
  10.             onRenderComplete: function() {
  11.             }
  12.         });

以上仅是使用jQuery实现Ajax分页加载简单使用的前奏,后续有何优化欢迎按Ctrl+D收藏同乐儿网址。


如果觉得该作者的文章对你有帮助,请随意打赏给他。您的支持将鼓励作者继续创作!
打赏
X
打赏本文作者方式

微信扫一扫可留言


继续浏览有关 ajax,jQuery,分页加载 的文章

分享至:


发表我的评论
取消评论

表情
  • 121 评论
  • 312 粉丝
  • 140 文章

    • 同乐儿
    • 北京 朝阳区
    • 2020年1月1日
    • 欢迎前往这里http://mb.yjz.top/web/sites/template挑选精美网站,如有仿站或插件的制作寻求,可联系邮箱(diamond0422@qq.com )或微信(Diamond0422),二者皆有通知消息,会第一时间看到,如可以制作二呆会主动与你联系。
    • 查看更多 >
    随机热门
    标签
    wordpress (82) 原创 (29) wordpress优化 (26) wordpress主题 (24) wordpress插件 (22) Typecho (19) wordpress教程 (18) wordpress seo (17) Typecho插件 (15) 博客主题 (8) emlog (8) emlog插件 (7) wordpress维护 (6) CMS主题 (5) 企业主题 (4) DNSPod for emlog (3) 淘宝客主题 (3) 修订版本 (3) 自动保存 (3) 移动适配 (3)
    360图床

    360图床