完善lazyload懒加载图片渐显特效

作者:Matrix 被围观: 2,194 次 发布时间:2013-09-03 分类:wordpress建站 兼容并蓄 | 无评论 »

NOTICE:这是一个创建于 1189 天前的主题,其中的信息可能已经有所发展或是发生改变。

图片时载入的渐显特效JQuery 中有提到lazyload,可以加速WordPress站点的页面载入速度。只是以前的有些偏移这里稍微更新一下。

JQuery

官网:http://www.appelsiini.net/projects/jeditable

github:https://github.com/tuupola/jquery_jeditable

多图demo:http://www.appelsiini.net/projects/lazyload/enabled_gazillion.html

预加载图片和lazyload v1.8.5下载:

http://www.400gb.com/file/29074139

http://pan.baidu.com/share/link?shareid=2497435386&uk=3238236832

步骤:

1.header中加载JQ库 这里使用1.7.2版本的没问题。若已经加载JQ库不必重复加载。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

2.紧接着加载压缩包里的jquery.lazyload.min.js。依然还是主题的header中。(示例,放入主题目录内的/js/文件夹)

<script src="<?php bloginfo('stylesheet_directory');?>/js/jquery.lazyload.min.js" charset="utf-8"></script>

3.再添加js代码,还是紧接着放置。

  1.   <script type="text/javascript" charset="utf-8">  
  2. jQuery(document).ready(  
  3. function($){  
  4. $("img").lazyload({  
  5.   
  6.      effect      : "fadeIn" //加载图片使用的效果(淡入)  
  7.   
  8. });  
  9. });  
  10.   </script>  

说明:第4行的img为需要预加载的地方。这里是所有img标签。

4.还再主题的header.php中添加

  1. <?PHP ob_start();?>  

说明:使用ob_start()函数自动在缓冲区处理需要最终加载的图片标签格式

5.在主题footer.php适当位置处添加php代码.可以是</body>之前,也可以是最后一行。

  1.     <?php  
  2.   
  3. //图片延缓加载相关处理,替换src为data-original,并添加占位符  
  4. $echo = ob_get_contents(); //获取缓冲区内容  
  5. ob_clean(); //清楚缓冲区内容,不输出到页面  
  6. $placeholder = "grey.gif"//占位符图片  
  7. $preg = "/<img (.*)src(.*) \/>/i"//匹配图片正则  
  8. $replaced = '<img \\1src="'.$placeholder.'" data-original\\2 />';  
  9. print preg_replace($preg$replaced$echo); //重新写入的缓冲区  
  10. ob_end_flush(); //将缓冲区输入到页面,并关闭缓存区  
  11. ?>  

说明:注意第6行中的grey.gif为:预加载的图片名称grey.gif,预加载的图片路径:wordpress程序根目录。当然这里也可以使用绝对路径。

压缩包内还有白色的white.gif和透明的transparent.gif都是预加载图片,可自定义跟换。

参考:http://dl.epinv.com/post/304.html

http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/

http://www.oschina.net/code/snippet_111193_3306

http://www.173it.cn/view-5577-1.html

本文固定链接:http://www.hhtjim.com/perfecting-the-lazyload-lazy-loading-images-fade-in-special-effects.html
Matrix
本文章由 Matrix 于2013年09月03日发布在wordpress建站, 兼容并蓄分类下,目前没有通告,你可以至底部留下评论。
转载请注明:完善lazyload懒加载图片渐显特效-HHTjim'S 部落格
关键字:, ,

添加新评论 »

 😛 Sad 忧伤 👿 Smile 笑脸 😳 😀 😯 😮 😕 😎 😆 😡 😈 Roll Eyes 转眼珠 😉 💡 😐 😥 Mr Green 绿脸先生

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!