同乐儿

  1. 首页
  2. jquery专题
jQuery:Ajax分页加载简单使用前奏
发布 | 11个月前 (08-04) | 阅读数:1001 | 评论数: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 评论
  • 204 粉丝
  • 139 文章
  • 最新文章
    diamond于2019-04-26 22:17:16发表:WeMediaForEmlog付费阅读自媒体插件(支持payjs微信支付)插件截图:插件介绍:本插件可以隐藏文章...
    diamond于2019-04-23 00:22:41发表:TleBarragerForTypecho评论弹幕插件插件介绍:为Typecho增加评论弹幕功能使用方法:第一...
    diamond于2019-04-02 00:26:53发表:原创:WeMediaForWordPress付费阅读插件(支持免登录SPay+payjs微信支付)插件介绍:本插件可以隐藏文章中的任意部分内容,当访客付费后,可...
    diamond于2019-03-10 14:16:16发表:仿站:miaopaiForEmlog秒拍主题模板# 模板截图- 用户登陆截图- 首页截图- 文章页截图...
    diamond于2019-02-26 15:53:01发表:仿站:inkerForTypecho映客主题模板# 模板截图- 电脑版 综合截图- 电脑版 文章截图(此截图只...

    • 同乐儿
    • 北京 朝阳区
    • 2018年8月1日
    • 欢迎前往这里http://mb.yjz.top/web/sites/template挑选精美网站后联系微信Diamond0419购买~
    • 查看更多 >
    随机热门
    标签
    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)
    阿里图床

    阿里图床