WordPress

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

萨龙龙萨龙龙 WordPress 9 年前
1.51W 5
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.     });
  9.     ias.extension(new IASTriggerExtension({
  10.         text: '加载更多', //此选项为需要点击时的文字
  11.         offset: 2, //设置此项后，到 offset-1 页之后需要手动点击才能加载，取消此项则一直为无限加载
  12.     }));
  13.     ias.extension(new IASSpinnerExtension());
  14.     ias.extension(new IASNoneLeftExtension({
  15.         text: '已经加载完成！', // 加载完成时的提示
  16.     }));
  17.     ias.on('rendered', function(items) {
  18.         $(".content img").lazyload({
  19.             effect: "fadeIn",
  20.         failure_limit : 10
  21.         }); //这里是你调用Lazyload的代码
  22.     })
  23. </script>

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

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

赞(4)
赏

本文由 远方的雪山 作者：萨龙龙 发表，转载请注明来源！

关键词：, ,
萨龙龙

萨龙龙

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

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

相关文章

LensNews

热评文章

评论：

5 条评论，访客：0 条，博主：0 条
  1. Say哈哈
    Say哈哈发布于： 
    回复

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

    • 萨龙龙
      萨龙龙发布于： 
      回复

      保留文章版权就可以！

  2. 咚门
    咚门发布于： 
    回复

    图片lazyload其实挺实用的。

  3. 美Win网
    美Win网发布于： 
    回复

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

    • 萨龙龙
      萨龙龙发布于： 
      回复

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

发表回复