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

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

官网: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

步骤:

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

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

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(
function($){
$("img").lazyload({

     effect      : "fadeIn" //加载图片使用的效果(淡入)

});
});
  </script>

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

<?PHP ob_start();?>

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

 <?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

03-04 15:07