大理高端网站建设|网站托管|极速建站|WordPress主题设计开发

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

2015-06-27 4054次

jQuery无限加载更多插件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项目下载萨龙网络演示