Simple Lazyload: WordPress图片迟加载插件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      • 今天看到一个网站上面说到隐藏区域内容图片延迟加载的问题,给出的代码是:
        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

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

  7. 刚刚升级到2.4版本,虽然启作用了,但是不能还原原图片出来的。望修复此BUG啊。。。