WordPress真正支持图片迟加载的Lazyload插件:simple-lazyload

插件转移提示

由于网站内容调整,开发部分的内容转移到了www.brunoxu.com站点,wp插件新地址如下:

simple-lazyload 新地址: http://www.brunoxu.com/simple-lazyload.html

auto-lazyload-and-auto-highslide 新地址: http://www.brunoxu.com/auto-lazyload-and-auto-highslide.html

Images Lazyload and Slideshow 新地址: http://www.brunoxu.com/images-lazyload-and-slideshow.html

插件背景

众所周知,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.com/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-lazyloadImages 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:

=== simple-lazyload ===
Contributors: xiaoxu125634
Donate link: http://blog.brunoxu.com/simple-lazyload/
Tags: true lazyload, highslide, reduce http requests
Requires at least: 3.0
Tested up to: 3.3
Stable tag: trunk

simple-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.com/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

插件转移提示

由于网站内容调整,开发部分的内容转移到了www.brunoxu.com站点,wp插件新地址如下:

simple-lazyload 新地址: http://www.brunoxu.com/simple-lazyload.html

auto-lazyload-and-auto-highslide 新地址: http://www.brunoxu.com/auto-lazyload-and-auto-highslide.html

Images Lazyload and Slideshow 新地址: http://www.brunoxu.com/images-lazyload-and-slideshow.html

93 条评论

昵称
  1. yy

    这样会不会对图片的收录有影响?

    1. Bruno

      应该没有影响

  2. 我家特产

    我用lazyload插件都会导致网站上的图片不显示,其他lazyload插件也是。。困扰很久了,求解??

    1. Bruno

      你好啊,由于博客内容调整,simple lazyload的项目首页已经转到http://www.brunoxu.com/simple-lazyload.html

      麻烦朋友到新首页提问好吗?谢谢配合!

      1. 我家特产

        好的

  3. Jedediah

    It seems to be causing a conflict with my image slider on my home page: http://toasterdroid.com Any ideas?

  4. appimm.com

    我的在IE7\8都出现空白,麻烦看看吧

  5. zicca

    首页加载完成,logo位置还有个小圆圈图标在那转,怎么解决呢? 😯

  6. 极库

    很棒!不过发现手持设备端的移动主题没能支持,求解!

  7. 软件有料

    请麻烦看一下我的站,加了这个插件之后,首页正常工作,但是文章内页所有图片都是空白,怎么拉也不加载。去掉评论模板后正常,我安装了comments-ajax

    1. xiaoxu125634

      ok,我有空看下和这个插件的兼容性

  8. Mads Phikamphon

    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

    1. xiaoxu125634

      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.

      1. Toom

        牛逼

  9. liuzc

    在IE 7下无法显示出图片. IE 7使用的人还是很多的吧?

    1. xiaoxu125634

      有这回事吗,我先看下

    2. xiaoxu125634

      亲,我测了IE7的模式,在我这能正常实现lazyload效果,可能是其他原因导致图片没有迟加载效果吧。

  10. 布格拉

    可惜这样替换后手机无法正常显示图片了

    1. xiaoxu125634

      安卓手机也支持js的,应该可以看到图片的,亲。

    2. xiaoxu125634

      我刚才手机访问了下我网站,完全可以的。不支持js的浏览器也能显示图片。可以关注下另一个插件Images Lazyload and Slideshow,是simple-lazyload的加强版。

      1. 布格拉

        我的是诺基亚uc不显示

        1. xiaoxu125634

          应该和doctype有关。换成这样的可能就可以了。

        2. xiaoxu125634

          这边我用手机无js支持模式也试了下,没有问题。诺基亚+UC环境我这还真没有,又不好测。实在没办法了。诺基亚旧机型现在很少了,大部分手机能访问就行了。

  11. MingDong

    博主您好,小站一直使用这款插件,以前用CHrome效果很好,今天换到IE9下发现出现了问题。像我的站点中的任意一张图片在fadeIn效果时就停住了,图片灰蒙蒙的,您有时间麻烦您帮我看一下,谢谢 😛

    1. xiaoxu125634

      你好,我看了你的网站在IE9下面是的显示,的确是和其他浏览器不一样,渐现的效果没有出来。我又看了自己的博客在IE9下的表现,却没有这样的问题。虽然我研究了一会这个问题的原因,但是没有弄明白为什么。不过有一点可以确定的是,这个问题和主题有关,可能换一个主题问题就会消失了。现在你用的主题有点点问题,也可能是插件的缘故,本该在header中出现的内容跑到了body里面。

  12. kn007

    你好,这个simple-lazyload,确实是能实现真正的按需加载图片,但是他好像对文章的图片不是很有效,文章图片照样加载(启用了highslide),当看到图片及时显示,而表情或者评论头像,则是当看到再加载。这个是否能修复?
    用auto-lazyload-and-auto-highslide,根本就没有按需加载图片,全部都加载了

    1. xiaoxu125634

      你好,highslide插件对迟加载有影响的,它会预加载6个图片左右,可以先尝试下Images Lazyload and Slideshow插件。

      1. kn007

        这个插件能解决问题?我试试