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是更加先进的图片辅助插件,有更强大的迟加载功能,有更多的图片浏览效果可选,有更多的设置用来实现特别的效果。

  • simple_lazyload_skip_lazyload filter的使用

    用来控制插件的作用域,举例说明,如首页不添加迟加载效果:
    在functions.php里面加上代码:

    add_filter('simple_lazyload_skip_lazyload', 'simple_lazyload_skip_lazyload_func');
    function simple_lazyload_skip_lazyload_func($skip_lazyload) {
    if (is_home()) {
    return true;
    }
    return $skip_lazyload;
    }

  • skip_lazyload标签的使用

    用来控制个体图片是否添加迟加载效果,在img标签里面加上skip_lazyload:

    <img src="http://www.xxx.com/images/1.jpg" skip_lazyload/>
    <img src="http://www.xxx.com/images/2.jpg" class="skip_lazyload"/>

  • simple_lazyload_loading_icon filter的使用

    用来更换加载图标,例如:
    在functions.php里面加上代码:

    add_filter('simple_lazyload_loading_icon', 'simple_lazyload_loading_icon_func');
    function simple_lazyload_loading_icon_func($loading_icon) {
    return 'http://www.xxx.com/loading.gif';
    }

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

  • 与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.7 =
* 2014-10-16
* fixbug: prevent image’s multiple loading.
* upgrade: fix height when post images use percent width.
* upgrade: remove mobile exclusion.
* upgrade: use new loading icon, more prominent.
* upgrade: add ‘simple_lazyload_loading_icon’ filter for customizing loading icon.
* upgrade: reload images which has error occuring during first loading.

= 2.6 =
* 2014-09-26
* upgrade: optimize process of lazy loading for better performance and comfortable experience.

= 2.5 =
* 2014-09-21
* upgrade: add ‘simple_lazyload_skip_lazyload’ filter, use this you can customize lazy load scope.
* upgrade: add lazy load switch for images, when an image contains ‘skip_lazyload’ class or attribute, it will no longer be lazy loaded.

= 2.4 =
* 2014-08-25
* upgrade: optimize lazyload realization codes.
* upgrade: optimize description and tags.

= 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. 博主你好 我网站用了瀑布流流效果 现在用了您写的插件导致无法获取图片高度产生偏差,请问如何让lazyload获取图片的高度?并生成和原图尺寸大小一样的替代图片?我想手工改一下。

  2. 博主,控制单个图片不使用Lazyload貌似不好用啊
    无论是在img标签里加上skip_lazyload 还是class="skip_lazyload" 还是会被懒加载盯上,是我哪里使用的不对吗?有空回答一下吧,谢谢了!