WordPress图片迟加载插件 simple-lazyload

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收录地址:

    http://wordpress.org/extend/plugins/simple-lazyload/

  • 插件首页:

    http://www.brunoxu.com/simple-lazyload.html

  • 相关插件:

    可以和图片查看效果插件auto-highslide配合使用,来优化图片效果。

    auto-lazyload-and-auto-highslide是把两个插件合并后产生的,拥有simple-lazyload和auto-highslide两个插件的功能。

    Images Lazyload and Slideshow是更加先进的图片辅助插件,有更强大的迟加载功能,有更多的图片浏览效果可选,有更多的设置用来实现特别的效果。

与其他插件的兼容性问题解决:

  • 与WP-PostRatings冲突

    【2012.07.17】 WP-PostRatings插件显示的五角星图片被本插件添加的背景图干扰,针对性做了调整,对于WP-PostRatings插件用到的图片不做处理。simple-lazyload和Images Lazyload and Slideshow插件都做了更新以解决这个问题。

  • 与Autoptimize冲突

    【2012.07.22】 经乐乐同学提醒,发现了与Autoptimize插件有冲突。安装了此插件,并且开启CSS压缩的时候,会导致页面中的图片都显示不出来。原因是Autoptimize插件CSS压缩功能把不该启用的样式给启用了,导致所有迟加载的图片都设为不显示了。此问题应该是Autoptimize插件做相应的改进。考虑到是老外的插件,沟通会有点波折,给出一个妥协的解决方法:在前面,加一个style:
    <style type=”text/css”>
    .lh_lazyimg {display:inline;}
    </style>

更新历史:

= 2.3 =
* 2014-06-19
* upgrade : optimize lazyload script, not to load images far from current screen above.
* upgrade : change links of plugin homepage and author homepage.

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

= 2.0 =
* 2012-06-06
* upgrade : expand the scope of lazyload. previously only the content images take effect, now all the images work.

= 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

93 thoughts on “WordPress图片迟加载插件 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

  14. ztp

    插件我觉得有个致命缺点。就是在没有加载jquery库情况下无法显示图片,有些时候为了省流量有些页面可能只有一张图片是不需要jquery库和lazyload的。还有一个就是有些隐藏页面显示后图片无法显示,有些加了类似position: fixed;属性的页面也无法正常显示。希望改进。

    1. xiaoxu125634 Post author

      如果怕占流量可以改成引用新浪的云资源,那就需要做一些修改。总体来说这个插件适合中规中矩的普通博客,就是用来写写文章的网站。如果像你一样的diy很多的网站,可能真会有些不太合适。如果你懂得前端技术,可以参考里面的迟加载代码,直接写到主题里面去。目前我写的迟加载实现应该算是最精简的了,没有用到jquery lazyload和其他lazyload js类库。要用本插件,必须加载jquery类库,插件里面有自动引用jquery的代码,如果你没有删掉wordpress自带js库的话,那就是主题写的不规范的原因才导致没有自行加载jquery。position等于fixed的,offset值不会增加,所以如果没显示可能会一直不能显示。不过这个问题我会思考一下,看能不能解决掉。

      1. ztp

        谢谢你的回复,我想说的流量是移动手机用户的流量,为了适应移动用户,我尽量精简不必要的文件或代码,可以说按K算了。所以不必要的时候我是不会加载那么大jquery库。我的意思是说可不可以加一段检测代码,如果没有jquery库就不加载azyload了。对于position的,我今天研究了一下,可能是容器的问题,把代码里面的windown换成相关的说可以了,但这是治标不治本,换了页面就不行了,我也是刚研究网站不久,很多地方一知半解。

        1. xiaoxu125634 Post author

          追求网站的代码精简没错,但我觉得没有必要太过苛求这个,做出世界上最精简的网站又如何,关键还是大方向的规划正确就行,比如内容必须精致。没有jquery类库就不加载lazyload,这样的流程很奇怪,换成哪些页面使用lazyload比较说的通。其实每个页面都加载jquery没什么,用户不会因为多加载了几十k的东西就决定不访问网站了,现在已经是3G 4G Wlan的时代,网速已经不是以前那样了。

      2. ztp

        今天看到一个网站上面说到隐藏区域内容图片延迟加载的问题,给出的代码是:
        container.find(‘img[data-src]‘).each(function() {
        $(this).attr(‘src’, $(this).attr(‘data-src’))
        .removeAttr(‘data-src’);
        });
        我对JS代码不是很了解,不知怎么用,原文地址是http://www.veryhuo.com/a/view/34070.html

        1. xiaoxu125634 Post author

          这个代码是用来指定图片不使用迟加载效果的。还是要可以演变成你需要的效果,不过还是要具体看问题是什么才好修改。

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>