完善lazyload懒加载图片渐显特效
作者：matrix 被围观: 3,367 次 发布时间：2013-09-03 分类：Wordpress 兼容并蓄 | 无评论 »
这是一个创建于 3285 天前的主题，其中的信息可能已经有所发展或是发生改变。
图片时载入的渐显特效JQuery 中有提到lazyload，可以加速WordPress站点的页面载入速度。只是以前的有些偏移这里稍微更新一下。
官网：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](https://www.hhtjim.com/tag/js)">
2.紧接着加载压缩包里的jquery.lazyload.min.js。依然还是主题的header中。（示例，放入主题目录内的/js/文件夹）
<script src="<?php bloginfo('stylesheet_directory');?>/[js](https://www.hhtjim.com/tag/js)/jquery.lazyload.min.js" charset="utf-8"></script>
代码语言：javascript复制3.再添加js代码，还是紧接着放置。
<script type="text/javascript" charset="utf-8">
jQuery(document).ready(
function($){
$("img").lazyload({
effect : "fadeIn" //加载图片使用的效果(淡入)
});
});
</script> 说明：第4行的img为需要预加载的地方。这里是所有img标签。
代码语言：javascript复制4.还再主题的header.php中添加
<?PHP ob_start();?> 说明：使用ob_start()函数自动在缓冲区处理需要最终加载的图片标签格式
代码语言：javascript复制5.在主题footer.php适当位置处添加php代码.可以是</body>之前，也可以是最后一行。
<?php
//图片延缓加载相关处理，替换src为data-original，并添加占位符
$echo = ob_get_contents(); //获取缓冲区内容
ob_clean(); //清楚缓冲区内容，不输出到页面
$placeholder = "grey.gif"; //占位符图片
$preg = "/<img (.*)src(.*) />/i"; //匹配图片正则
$replaced = '<img \1src="'.$placeholder.'" data-original\2 />';
print preg_replace($preg, $replaced, $echo); //重新写入的缓冲区
ob_end_flush(); //将缓冲区输入到页面，并关闭缓存区
?> 说明：注意第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
