插件背景:
众所周知,jQuery的lazyload的插件是假的迟加载,http请求一个也不少,仅仅是一个fadeIn的效果而已,服务器压力一点没有减轻。
网上实现迟加载的方法有很多:基于YUI的淘宝式图片迟加载;图片不写src属性,用original代替;把图片、html放在textarea里面,在JS调出来显示......
可是实现真正图片迟加载的Wordpress插件却鲜能找到,为此凭自己所学做了这个插件:simple-lazyload,让Wordpress也能使用上这个特性,真正减轻服务器的压力。
插件名称:simple-lazyload
当前版本:2.2
插件官网首页:http://wordpress.org/extend/plugins/simple-lazyload/
插件首页:http://blog.brunoxu.info/simple-lazyload/
下载地址:http://wordpress.org/extend/plugins/simple-lazyload/
支持Wordpress版本:Wordpress 3.0及以上测试能正常使用,之前的版本没有测试。
兼容性说明:不依赖任何其他插件。
相关插件:建议与auto-highslide插件配合使用,以达到更好的图片浏览效果。
安装说明:没有上传到官网,无法在线安装。只能下载补丁包,上传到“/wp-content/plugins/”目录下,“plugins/simple-lazyload/” 目录下直接是php程序文件了,目录结构不要多了。传好后再通过插件列表页得激活链接来激活本插件,即可正常使用了。
其他说明: 有些主题里面使用jquery的lazyload插件实现了图片迟加载,但上面说了,这个是假的迟加载,使用了本插件后,建议把相关的插件和代码去除掉,减轻页面加载负担。
软件兼容性说明:
【2012.07.17】 WP-PostRatings插件显示的五角星图片被本插件添加的背景图干扰,针对性做了调整,对于WP-PostRatings插件用到的图片不做处理。simple-lazyload和Images Lazyload and Slideshow插件都做了更新以解决这个问题。
【2012.07.22】 经乐乐同学提醒,发现了与Autoptimize插件有冲突。安装了此插件,并且开启CSS压缩的时候,会导致页面中的图片都显示不出来。原因是Autoptimize插件CSS压缩功能把不该启用的样式给启用了,导致所有迟加载的图片都设为不显示了。此问题应该是Autoptimize插件做相应的改进。考虑到是老外的插件,沟通会有点波折,给出一个妥协的解决方法:在</body>前面,加一个style:
<style type="text/css">
.lh_lazyimg {display:inline;}
</style>
此解决方法同样适用于Images Lazyload and Slideshow插件。
Description:
被围观 6,992 views+=== simple-lazyload ===
Contributors: xiaoxu125634
Donate link: http://blog.brunoxu.info/simple-lazyload/
Tags: true lazyload, highslide, reduce http requests
Requires at least: 3.0
Tested up to: 3.3
Stable tag: trunksimple-lazyload is an automatic image true lazyload plugin for WordPress, it can helps to reduce http requests effectively.
== Description ==
This plugin automatically copy image's src value to file attribute, replace src value with a blank image's url before showing, when the page is loaded, lazyload js will decide to load the images' actual content automatically, only when user wants to see them.
This plugin has a more perfect performance working with the "auto-highslide" plugin.
Also, you can use another combined pugin "auto-lazyload-and-auto-highslide" instead of the two above.
/**********************************************************/
View the true lazyload effect Example 1
View the true lazyload effect Example 2
View the true lazyload effect Example 3
/**********************************************************/
本插件实现真实的图片迟加载功效,自动保存、替换图片的实际地址,只有当用户需要看到时,才会向服务器去请求图片内容,否则是一张空白图片,对服务器没有负担。
本插件可以与【auto-highslide】插件配合使用,效果更佳。
当然你也可以使用另一个组合插件【auto-lazyload-and-auto-highslide】来取代它俩的功能。
== Installation ==
This section describes how to install the plugin and get it working.
e.g.
1. Upload `simple-lazyload` folder to the `/wp-content/plugins/` directory.
2. Activate the plugin through the 'Plugins' menu in WordPress Background.== Frequently Asked Questions ==
Still Not Working, Leave a message to me in http://blog.brunoxu.info/simple-lazyload/
== Screenshots ==
1. /screenshot-1.jpg
== Changelog ==
= 2.2 =
* 2012-07-17
* upgrade : add exception for plugin WP-PostRatings, for displaying reason.
* upgrade : do not lazyload images for feeds, previews, mobile. refer to Lazy Load plugin.= 2.1 =
* 2012-06-07
* upgrade : for better performance, images with width or height use blank_1x1.gif as placeholder, while images without width and height use blank_250x250.gif as placeholder(except: smilies) 对表情图的特别支持
* upgrade : add a loading.gif background to each image, if image's loading is timeout, visitors will understand what happened. 加loading的背景图= 2.0 =
* 2012-06-06
* upgrade : expand the scope of lazyload. previously only the content images take effect, now all the images work. 所有的图片都能有lazyload效果了= 1.3 =
* 2012-05-29
* upgrade : images are visible even when javascript has been forbidden
* upgrade : optimize lazyload, reduce the Performance Loss
* upgrade : use wp_enqueue_script method instead of js loading jQuery library
* upgrade : add js to head instead of footer= 1.2 =
* 2012-05-08
* upgrade : use loading picture instead of blank image= 1.1 =
* 2012-04-15
* fixbug : lazyload sometime don't work, images can't showing
* upgrade : add javascripts to footer, no longer to the head= 1.0 =
* 2012-03-25 simple-lazyload released

你好,这个simple-lazyload,确实是能实现真正的按需加载图片,但是他好像对文章的图片不是很有效,文章图片照样加载(启用了highslide),当看到图片及时显示,而表情或者评论头像,则是当看到再加载。这个是否能修复?
用auto-lazyload-and-auto-highslide,根本就没有按需加载图片,全部都加载了
你好,highslide插件对迟加载有影响的,它会预加载6个图片左右,可以先尝试下Images Lazyload and Slideshow插件。
这个插件能解决问题?我试试
博主您好,小站一直使用这款插件,以前用CHrome效果很好,今天换到IE9下发现出现了问题。像我的站点中的任意一张图片在fadeIn效果时就停住了,图片灰蒙蒙的,您有时间麻烦您帮我看一下,谢谢
你好,我看了你的网站在IE9下面是的显示,的确是和其他浏览器不一样,渐现的效果没有出来。我又看了自己的博客在IE9下的表现,却没有这样的问题。虽然我研究了一会这个问题的原因,但是没有弄明白为什么。不过有一点可以确定的是,这个问题和主题有关,可能换一个主题问题就会消失了。现在你用的主题有点点问题,也可能是插件的缘故,本该在header中出现的内容跑到了body里面。
可惜这样替换后手机无法正常显示图片了
安卓手机也支持js的,应该可以看到图片的,亲。
我刚才手机访问了下我网站,完全可以的。不支持js的浏览器也能显示图片。可以关注下另一个插件Images Lazyload and Slideshow,是simple-lazyload的加强版。
我的是诺基亚uc不显示
应该和doctype有关。换成这样的可能就可以了。
这边我用手机无js支持模式也试了下,没有问题。诺基亚+UC环境我这还真没有,又不好测。实在没办法了。诺基亚旧机型现在很少了,大部分手机能访问就行了。
在IE 7下无法显示出图片. IE 7使用的人还是很多的吧?
有这回事吗,我先看下
亲,我测了IE7的模式,在我这能正常实现lazyload效果,可能是其他原因导致图片没有迟加载效果吧。
You plugin works great, but is it possible to only lazy load specific images?
For example by giving specific images a certain property or flag?
Thanks a lot,
Mads
Yes, it is possible to only load images with special attribute, only need to add some codes into simple-lazyload.php in the plugin directory, for example, add [code]if (stripos($lazyimg_str,'need_lazy="1"') === FALSE) return $lazyimg_str;[/code] below line 49 [code]$lazyimg_str = $matches[0];[/code], [code]need_lazy="1"[/code] is the effective attribute added in images which need lazy load, you can replace it with others.
请麻烦看一下我的站,加了这个插件之后,首页正常工作,但是文章内页所有图片都是空白,怎么拉也不加载。去掉评论模板后正常,我安装了comments-ajax
ok,我有空看下和这个插件的兼容性
很棒!不过发现手持设备端的移动主题没能支持,求解!