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

插件背景

众所周知,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://www.brunoxu.com/simple-lazyload.html

下载地址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://www.brunoxu.com/simple-lazyload.html
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://www.brunoxu.com/simple-lazyload.html

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

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

  1. xiaoxu125634 Post author

    今天看到一个wordpress lazyload插件,名字叫YS images lazyload

    http://www.linuxde.net/2011/12/3278.html

    差别是:simple-lazyload不依赖任何其他插件,不依赖jQuery的lazyload插件,不要求当前主题包含jQuery插件,会自动检查,如果没有会动态加载上.

  2. xiaoxu125634 Post author

    昨天通过wordpress审核,被官网收录,开心啊,这个是地址:http://wordpress.org/extend/plugins/simple-lazyload/

  3. Colin

    插件不错, 但有个问题,我自己的修改的主题插件好像没有用,改用系统默认的就非常好!请问有可能是什么原因造成? 谢谢!我的网址http://www.arally.com

    1. xiaoxu125634 Post author

      朋友,www.arally.com/the-soso-soso-the-street-map-panorama-tours-freeze-most-beautiful-wuyuan/ 这个我看了,迟加载是正常的

      1. Colin

        恩,单面页好像没问题,但首页是不是有问题呢~我以为其它JS会有冲突,又去其它一些JS了, 但好像还是没用, 首页加载时间达到2秒了!

        1. xiaoxu125634 Post author

          这个问题的确存在。目前插件只能支持文章页和非截取的列表页。自带主题是非截取的,所以首页也有迟加载效果。

          1. Colin

            我刚看了你的原码,你的延迟加载只是针对the_content,因为我的首页是单独调用缩略图的get_thumbmail,所以延迟就已经不起作用了,还能不能对整站指定的class的img进行延迟呢?

          2. xiaoxu125634 Post author

            get_thumbnail应该是鸟类网插件提供的方法吧。
            朋友,你说通过class来决定img迟加载的办法就是jQuery lazyload插件的实现。
            用php来实现,主要是因为js实现不是真实此加载,chrome下没效果。
            现在仅仅对the_content进行了lazyload实现,如何拓展到全部内容,还没有想到好的办法,如果你有,可以发出来,一起探讨探讨。

    1. xiaoxu125634 Post author

      data-original也好,original也好,file也好,实现的原理都一样,在图片在可视区域时,才会加载真实的图片内容,这就是迟加载。

  4. ted

    有几个问题想请教一下:
    1.如果不用插件按照你的原理改造wordpress网站,在效率上比用插件高吗?
    2.我注意到你的测试页面,有标签,请问这个是插件的原因生成的吗?是否有利于图片的seo?

      1. ted

        就是我注意到你给的示例页面“http://webdev.brunoxu.com/archives/223.html”,在每一张图片标签《img》《/img》后面,都有《noscript》《/noscript》标签,以防止不支持js的浏览器识别图片,请问这个是手动加上去的吗?

        1. xiaoxu125634 Post author

          这个是程序自动加上的,不需要手动加,功能参考的是另外一个插件“bj-lazy-load”,在此感谢该插件作者。

    1. xiaoxu125634 Post author

      自己改造在执行效率上会有所提高,但个人的工作效率上会有所下降,因为要加代码,要调整代码。
      有标签是指的什么标签,我不太明白。seo的话,图片seo应该会有影响。

  5. Colin

    从你的插件上受到很多启发, 最近想写个自动替换图片的alt, 正则怎么都写不好,下面这个正则,替换后多出一个链接来!但不知道怎么改,请指教!
    $title = $post->post_title;
    $prealt = “//i”;
    $newalt = ”;
    $content = preg_replace($prealt, $newalt, $content);
    return $content;

    1. xiaoxu125634 Post author

      先用 来弄出图片的html,再用callback来处理,如果有alt就用alt=['"]([^'"<>]*)['"];如果没有alt,直接加上alt

  6. 高档名片

    您好,我遇到一个严重的问题.
    当和JiaThis插件同时使用的时候JiaThis不能正确识别图片.

    看了一下代码应该是”src”被替换导致的.
    建议正文第一张图片排除替换.

        1. xiaoxu125634 Post author

          我在『Twenty Eleven』主题上测试了《JiaThis分享工具》插件,在侧边栏加了小工具,测试发现图片能正常显示,jiathis功能正常。能有更详细的问题描述吗?

          1. xiaoxu125634 Post author

            只启用jiathis插件,测试分享带图文章到QQ空间,发现没有文字也没有图,只有这样的内容【文章标题(带连接) 来自xx.wordpress.com】

  7. lele9013

    simple-lazyload 的插件目前还有个bug,就是我用了google的二维码的api后

    这个google的图片就不能显示了。

    能否加个 排除呢?

    1. xiaoxu125634 Post author

      你好,我已经看了,引起这次异常的是图片的src,程序在提取src时是按照单引号和双引号来作为界线的,所以src里面有单引号或者双引号就会引起,src提取异常。

      解决方法是: 使用urlencode来处理带有单引号双引号的src,如单引号转后是【%26%2339%3b】,双引号转后是【%26quot%3b】

      也可以使用在线转换工具帮转,http://tool.chinaz.com/Tools/URLEncode.aspx

  8. lele9013

    <img src=”http://api.qrserver.com/v1/create-qr-code/?size=500×500&data=”” alt=”QR Code for ”/>

    类似这样的代码 用了你的插件后 就不显示了

    1. xiaoxu125634 Post author

      五星的的确有异样,可是那个转动的小圈圈,就是本插件的特色,不能去掉啊。

      我发现换成“plusminus”,就是加号减号的样式,就表现不错。

        1. xiaoxu125634 Post author

          I have installed Dot-B theme, there’s a banner in the top, it shows normally. So i can’t know what’s the problem.

    1. xiaoxu125634 Post author

      My IP is 58.213.46.202. It’s ok when i use GoAgent proxy. But i can’t see a picture in the header.

  9. 瞎扯吧软件

    有点小问题,看http://xiacb.com/mac-osx-mountain-lion/这篇文章的截图合集,如果浏览到中间,拉动截图合集的横向滚条是看不到后面的图片的,一直在加载,只有看到网页的最底部再回头拉合集横向滚动条才能看到后面的图片。

  10. zicca

    插件很好用,延时加载效果比我之前挂的JS好,之前那个是假的效果,可惜我定制的主题,之前鼠标划过图片会有个白色的阴影效果的,自从加了装了这个插件,木有了,如何是好啊 :sad:

    1. xiaoxu125634 Post author

      修改主题style.css里面56,57行,改成:
      a img{webkit-transition: all 0.2s ease-in-out !important;-moz-transition: all 0.2s ease-in-out !important;-o-transition: all 0.2s ease-in-out !important;-ms-transition: all 0.2s ease-in-out !important;transition: all 0.2s ease-in-out !important;}
      a:hover img{-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=60)” !important;filter: alpha(opacity=60) !important;-moz-opacity: 0.6 !important;-khtml-opacity: 0.6 !important;opacity: 0.6 !important;-}

          1. zicca

            现在鼠标划过图片的确有白色阴影,但是会鼠标离开了还是会停顿在那里,插件关掉就正常了,伤心啊 :cry:

          2. xiaoxu125634 Post author

            IE上调试不方便,在css中加上img.lh_lazyimg{opacity: 1;filter: alpha(opacity=100);}看看吧

  11. kn007

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

    1. xiaoxu125634 Post author

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

  12. MingDong

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

    1. xiaoxu125634 Post author

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

    1. xiaoxu125634 Post author

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

        1. xiaoxu125634 Post author

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

    1. xiaoxu125634 Post author

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

    1. xiaoxu125634 Post author

      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.

  13. 软件有料

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>