WordPress图片迟加载插件 Simple Lazyload
http://www.brunoxu.com/simple-lazyload.html
背景:
众所周知,jQuery的lazyload的插件是假的迟加载,http请求一个也不少,仅仅是一个fadeIn的效果而已,服务器压力一点没有减轻。
网上实现迟加载的方法有很多:基于YUI的淘宝式图片迟加载;图片不写src属性,用original代替;把图片、html放在textarea里面,在JS调出来显示……
可是实现真正图片迟加载的Wordpress插件却鲜能找到,为此凭自己所学做了这个插件:Simple Lazyload,让Wordpress也能使用上这个特性,真正减轻服务器的压力。
详细介绍:
名称:
Simple Lazyload
特点:
WordPress图片迟加载插件,简单的图片迟加载插件,支持全文图片迟加载,无需任何设置,无设置页面
简介:
本插件实现真实的图片迟加载功效,自动保存、替换图片的实际地址,只有当用户需要看到时,才会向服务器去请求图片内容,否则是一张空白图片,对服务器没有负担。
本插件可以与auto-highslide插件配合使用,效果更佳。 当然你也可以使用另一个组合插件auto-lazyload-and-auto-highslide来取代他们的功能。WordPress收录地址:
插件首页:
相关插件:
可以和图片查看效果插件auto-highslide配合使用,来优化图片效果。
auto-lazyload-and-auto-highslide是把两个插件合并后产生的,拥有simple-lazyload和auto-highslide两个插件的功能。
Images Lazyload and Slideshow是更加先进的图片辅助插件,有更强大的迟加载功能,有更多的图片浏览效果可选,有更多的设置用来实现特别的效果。
simple_lazyload_skip_lazyload filter的使用
用来控制插件的作用域,举例说明,如首页不添加迟加载效果:
在functions.php里面加上代码:
add_filter('simple_lazyload_skip_lazyload', 'simple_lazyload_skip_lazyload_func');
function simple_lazyload_skip_lazyload_func($skip_lazyload) {
if (is_home()) {
return true;
}
return $skip_lazyload;
}
skip_lazyload标签的使用
用来控制个体图片是否添加迟加载效果,在img标签里面加上skip_lazyload:
<img src="http://www.xxx.com/images/1.jpg" skip_lazyload/>
<img src="http://www.xxx.com/images/2.jpg" class="skip_lazyload"/>
simple_lazyload_loading_icon filter的使用
用来更换加载图标,例如:
在functions.php里面加上代码:
add_filter('simple_lazyload_loading_icon', 'simple_lazyload_loading_icon_func');
function simple_lazyload_loading_icon_func($loading_icon) {
return 'http://www.xxx.com/loading.gif';
}
与其他插件的兼容性问题解决:
与WP-PostRatings冲突
【2012.07.17】 WP-PostRatings插件显示的五角星图片被本插件添加的背景图干扰,针对性做了调整,对于WP-PostRatings插件用到的图片不做处理。simple-lazyload和Images Lazyload and Slideshow插件都做了更新以解决这个问题。
与Autoptimize冲突
【2012.07.22】 经乐乐同学提醒,发现了与Autoptimize插件有冲突。安装了此插件,并且开启CSS压缩的时候,会导致页面中的图片都显示不出来。原因是Autoptimize插件CSS压缩功能把不该启用的样式给启用了,导致所有迟加载的图片都设为不显示了。此问题应该是Autoptimize插件做相应的改进。考虑到是老外的插件,沟通会有点波折,给出一个妥协的解决方法:在