• 您好,欢迎访问本站!
  • 登录
  • 公告
  • 地图
  • 标签
  • 链接
  • 留言
  • 主题购买
远方的雪山
  • 首页
  • 博客
    • 原野视听
      • 影片推荐
      • 纪录片
      • 轻音乐
      • 音乐推荐
    • 去野吧
      • 徒步登山
      • 摄影作品
      • 珍藏记忆
      • 远方走走
    • 技术归档
      • BbPress
      • BuddyPress
      • Redux框架
      • WooCommerce
      • WordPress
      • 软件系统
    • 绘画艺术
    • 远方站台
      • 人生故事
      • 南窗随笔
      • 唯美世界
  • 画廊
    • 自然风光
    • 徒步登山
    • 骑行之旅
    • 儿童摄影
    • 古城古迹
    • 植物花卉
  • 视频
    • 纪录片
    • 动画短片
  • 原创主题
  • 公告
  • 关于
    • 联系
    • 萨龙龙
    • 热评文章
    • 置顶文章
    • 最赞的文章

WordPress

首页 - 博客 - 技术归档 - WordPress - 正文

wordpress无限加载更多插件Infinite Ajax Scroll支持图片延迟加载

萨龙龙萨龙龙 WordPress 10年前
1.56W 5 4
LensNews

wordpress无限加载更多插件Infinite Ajax Scroll支持图片延迟加载ajax加载更多内容相当普遍了,萨龙龙在开发主题的过程中找了很多方法都不尽完美,jQuery.ias插件是相对完美的一款。

ias全称是Infinite Ajax Scroll,无限的ajax滚动,是一款jQuery滚动ajax分页插件,当页面滚动到容器可见部分将自动异步加载数据,萨龙龙在开发网站时都会将这个插件集成到主题中。

插件的集成很简单,分以下几个步骤:

1、网站中必须实现分页,需要有下一页链接,WP网站可以通过分页代码或插件来实现;

2、页面中引用jquery-ias.min.js

3、插件参数:container容器,所有文章的最外层元素,如下代码中的“content”:

  1. <section class="content">
  2.     <article class="post"></article>
  3.     <article class="post"></article>
  4.     <article class="post"></article>
  5.     <article class="post"></article>
  6. </section>

4、插件参数:item项,每一篇文章的最外层元素,如上代码中的“post”

5、插件参数:wp-pagenavi分页,分页代码最外层元素,如下代码中的“wp-pagenavi”:

  1. <div class="wp-pagenavi">
  2.     <span class="pages">第 1 页,共 2 页</span>
  3.     <span class="current">1</span>
  4.     <a href="#" class="page">2</a>
  5.     <a href="" rel="next" class="nextpostslink">下一页</a>
  6. </div>

6、插件参数:next下一页,分页代码中的下一页按钮或链接,如上代码中的“nextpostslink”

7、插件提示:加载更多,加载完成以及自动加载多少次后将手动点击加载

注意:加载次数(offset)如果填写2将自动加载一次,3将自动加载两次,所以offset-1等于自动加载的次数。有些文章介绍加载次数是offset+1,萨龙龙使用过程中都是offset-1次。

8、添加JS代码到你的JS文件中,代码如下:

  1. <script type="text/javascript">
  2.     var ias = $.ias({
  3.         container: ".content", //包含所有文章的元素
  4.         item: ".post", //文章元素
  5.         pagination: ".wp-pagenavi", //分页元素
  6.         next: ".wp-pagenavi a.nextpostslink", //下一页元素
  7.     });
  8.     ias.extension(new IASTriggerExtension({
  9.         text: '加载更多', //此选项为需要点击时的文字
  10.         offset: 2, //设置此项后,到 offset-1 页之后需要手动点击才能加载,取消此项则一直为无限加载
  11.     }));
  12.     ias.extension(new IASSpinnerExtension());
  13.     ias.extension(new IASNoneLeftExtension({
  14.         text: '已经加载完成!', // 加载完成时的提示
  15.     }));
  16.     ias.on('rendered', function(items) {
  17.         $(".content img").lazyload({
  18.             effect: "fadeIn",
  19.         failure_limit : 10
  20.         }); //这里是你调用Lazyload的代码
  21.     })
  22. </script>

要在加载更多后显示的文章中支持图片延迟加载,首选需要添加此图片延迟加载功能。同时jQuery ias无限加载更多功能同样合适商城产品列表。

萨龙龙的主题后台都添加了插件提示文本与加载次数,ias插件使用相当的方便,也很实用,大赞。
IAS项目下载萨龙网络演示原文地址

赞(4)
赏
分享

本文由 远方的雪山 作者:萨龙龙 发表,转载请注明来源!

关键词:ajax加载更多, jquery.ias, 无限滚动
萨龙龙

萨龙龙

文章:290 画廊:33 视频:37

一个平平常常的人,热爱生活、旅行和摄影,骑行去过西藏,一直计划再去。14年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!

远方的雪山原创简约wordpress摄影主题Neatimg
游崇圣寺三塔登苍山记

相关文章

  • WordPress 微博授权登录

    WordPress 微博授权登录

    WordPress 9年前 11
  • Question2Answer和Wordpress整合安装

    Question2Answer和WordPress整合安装

    WordPress 12年前
  • 申请Gravatar全球通用头像

    申请Gravatar全球通用头像

    WordPress 13年前 1
  • WordPress3.8全新的后台管理界面

    WordPress3.8全新的后台管理界面

    WordPress 12年前
  • WordPress MU多站点从子域名转子目录

    WordPress MU多站点从子域名转子目录

    WordPress 9年前 1
  • 自定义wordpress登录界面

    自定义wordpress登录界面

    WordPress 12年前
LensNews

热评文章

  • 1远方的雪山Salong主题免费分享和使用教程
  • 2WordPress相册插件NextGEN Gallery的使用
  • 3远方的雪山域名更换为yfdxs.com
  • 4自定义wordpress分享按钮
  • 5Concise主题更新至1.40,功能升级提升体验

最赞的文章

  • 1WordPress强大好用的分页插件WP-PageNavi使用
  • 2WordPress循环中判断为每篇文章设计不同的样式
  • 3远方的雪山Salong主题免费分享和使用教程
  • 4WordPress 最简便的边栏调用方法与提示
  • 5WordPress相册插件NextGEN Gallery的使用

评论:

5 条评论,访客:0 条,博主:0 条
  1. Say哈哈
    Say哈哈发布于: 2016-11-02 下午 19:43
    回复

    文章很好的,我转载了,有问题联系我马上删除。

    • 萨龙龙
      萨龙龙发布于: 2016-11-02 下午 21:00
      回复

      保留文章版权就可以!

  2. 咚门
    咚门发布于: 2015-07-08 上午 11:18
    回复

    图片lazyload其实挺实用的。

  3. 美Win网
    美Win网发布于: 2015-07-05 下午 19:49
    回复

    额,我找不到我的主机这个的位置,开启后就是直接无限加载了,找不到限制页数的位置。

    • 萨龙龙
      萨龙龙发布于: 2015-07-05 下午 20:20
      回复

      好好看下文章吧,写的已经相当详细,找到相关的class或id修改下就好。

发表回复 取消回复

原创主题

  • WordPress 在线教育主题 Slearn 的课程商城活动作品团队扩展插件

    WordPress 在线教育主题 Slearn 的课程商城活动作品团队扩展插件

    原创主题 6年前 4
  • [898]WordPress在线学习教育培训商城企业主题 Slearn

    [898]WordPress在线学习教育培训商城企业主题 Slearn

    原创主题 6年前 2
  • [¥699]WordPress简约高端网址导航类主题  Slhao (书签、工具和书箱)

    [¥699]WordPress简约高端网址导航类主题 Slhao (书签、工具和书箱)

    原创主题 6年前 8
  • [¥1699]WordPress简约高端企业通用产品展示主题  Slcorp

    [¥1699]WordPress简约高端企业通用产品展示主题 Slcorp

    原创主题 7年前 11

热门画廊

  • 大理苍山小花甸坝秋色大理苍山小花甸坝秋色 28
  • 修河河滩烧烤记修河河滩烧烤记 25
  • 雪域高原圣地拉萨雪域高原圣地拉萨 22
  • 大理苍山花甸坝秋色大理苍山花甸坝秋色 15

热门视频

  • BBC鸟瞰地球之欧洲篇

    BBC鸟瞰地球之欧洲篇

    纪录片 8年前 38
  • 皮克斯经典奥斯卡提名动画短片绑架课

    皮克斯经典奥斯卡提名动画短片绑架课

    动画短片 8年前 36
  • BBC鸟瞰地球之非洲篇

    BBC鸟瞰地球之非洲篇

    纪录片 8年前 25
  • 皮克斯经典奥斯卡获奖动画短片鸟鸟鸟

    皮克斯经典奥斯卡获奖动画短片鸟鸟鸟

    动画短片 8年前 22

萨龙网络原创WordPress主题

WordPres个人设计博客主题Guitui

WordPres个人设计博客主题Guitui

原创主题 8年前 24
Guigui 主题为桂桂所设计,萨龙龙开发的一个 WordPress 主题,设计风格简约、大气,看得出设…
WordPress 在线教育主题 Slearn 的课程商城活动作品团队扩展插件

WordPress 在线教育主题 Slearn 的课程商城活动作品团队扩展插件

原创主题 6年前 4
Slearn 主题的课程、商城、活动、作品和团队五个模块都做成了插件的形式,课程是在 LearnPres…
[898]WordPress在线学习教育培训商城企业主题 Slearn

[898]WordPress在线学习教育培训商城企业主题 Slearn

原创主题 6年前 2
Slearn 主题,一套在线学习教育培训商城 WordPress 企业主题,整合了 LearnPress…
[¥699]WordPress简约高端网址导航类主题  Slhao (书签、工具和书箱)

[¥699]WordPress简约高端网址导航类主题 Slhao (书签、工具和书箱)

原创主题 6年前 8
Slhao 主题是一款 WordPress 简约高端集书签、工具和书箱的网址导航类主题,主要就是为了方便…
[¥1699]WordPress简约高端企业通用产品展示主题  Slcorp

[¥1699]WordPress简约高端企业通用产品展示主题 Slcorp

原创主题 7年前 11
Slcorp 主题是一款简约高端企业通用产品展示 WordPress 主题,设计上简约、干净、精致、响应…
[¥998]WordPress 简约新闻自媒体主题  MNews(用户中心、用户关注、商城、付费阅读、点赞收藏、评论评分、站内信、打赏、视频点播)

[¥998]WordPress 简约新闻自媒体主题 MNews(用户中心、用户关注、商城、付费阅读、点赞收藏、评论评分、站内信、打赏、视频点播)

原创主题 7年前 76
MNews 主题是一款简约新闻自媒体类的 WordPress 主题,设计上简约、干净、精致、响应式,功能…
[¥1288]WordPress简约优雅企业 WooCommerce 商城主题 Taji

[¥1288]WordPress简约优雅企业 WooCommerce 商城主题 Taji

原创主题 8年前 63
Taji 主题是一款纯商城类的 WordPress 主题,集成 WooCommerce 强大的商城功能,…
[¥988]WordPress企业产品展示 WooCommerce 商城主题Fruit

[¥988]WordPress企业产品展示 WooCommerce 商城主题Fruit

原创主题 8年前 56
Fruit主题为企业而开发的产品展示商城主题,简约、精致的设计风格,集成自定义登录注册,微信登录,积分商…
WordPres个人设计博客主题Guitui

WordPres个人设计博客主题Guitui

原创主题 8年前 24
Guigui 主题为桂桂所设计,萨龙龙开发的一个 WordPress 主题,设计风格简约、大气,看得出设…
WordPress 在线教育主题 Slearn 的课程商城活动作品团队扩展插件

WordPress 在线教育主题 Slearn 的课程商城活动作品团队扩展插件

原创主题 6年前 4
Slearn 主题的课程、商城、活动、作品和团队五个模块都做成了插件的形式,课程是在 LearnPres…

Copyright © 2012-2016 萨龙网络.保留所有权利 滇ICP备16003941号-7

  网站地图
本站使用萨龙网络原创主题:LensNews  
繁

扫描二维码即刻联系我们

萨龙网络的每款主题都是诚意之作,价格合理。所以朋友,请怀着一颗诚挚的心联系我们,不要来讨价还价,我们也将送上最诚挚的服务!

QQ二维码QQ二维码 微信二维码微信二维码

关注 远方的雪山 微信公众号

远方的雪山微信公众号

按文章类型进行搜索

分享到微信朋友圈

打开微信,点击底部的“发现”
使用“扫一扫”即可将网页分享至朋友圈。

觉得文章有用请给作者打赏!

支付宝收款二维码支付宝扫一扫打赏 微信收款二维码微信扫一扫打赏

觉得文章有用请给作者打赏!

支付宝收款二维码支付宝扫一扫打赏 微信收款二维码微信扫一扫打赏