• 【网站重大改版】技术改变生活 更名为 Bruno电商技术™,现定位于电商基础技术研究和有价值的电商项目实战。
  • 【MyCnCartBE更新】MyCnCartBE v1.5发布
  •    4年前 (2012-03-22)  WordPress插件 WordPress插件开发 |   153 条评论  1168 
    文章评分 2 次,平均分 5.0
    导语:简单、高效、美观的图片迟加载插件,支持全部页面所有页面迟加载,不需要任何设置,安装激活立刻生效。

    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

     

    除特别注明外,本站所有文章均为Bruno电商技术™原创,转载请注明出处来自http://www.brunoxu.com/simple-lazyload.html

    发表评论

    表情 格式

    1. 大神,这个东西影响百度抓取么

      哈喽沃德 评论达人 LV.1 1个月前 (06-30) [0] [0]
      • @哈喽沃德这个还真不知道,我没有关注过图片的收录。应该不影响,因为源码里面有带真实地址的img代码,蜘蛛应该认的。

        Bruno 作 者 1个月前 (07-01) [0] [0]
    2. 上次关于某页不调用lazyload的问题解决了 用了is_page()解决的。但是新的问题:ie8下 png被懒加载之后 会有黑边或黑框 希望能过滤掉png的懒加载 如何 我试着在代码里去掉png格式,但是下面貌似还有针对标签的判断

      石家庄二手电脑 评论达人 LV.1 4个月前 (04-09) [0] [0]
    3. 博主,wp 4.3.1貌似不起作用

      fb.mu 评论达人 LV.1 9个月前 (11-10) [0] [0]
    4. 博主,控制单个图片不使用Lazyload貌似不好用啊
      无论是在img标签里加上skip_lazyload 还是class="skip_lazyload" 还是会被懒加载盯上,是我哪里使用的不对吗?有空回答一下吧,谢谢了!

      VAGH 评论达人 LV.2 1年前 (2015-08-16) [0] [0]
    5. 博主你好 我网站用了瀑布流流效果 现在用了您写的插件导致无法获取图片高度产生偏差,请问如何让lazyload获取图片的高度?并生成和原图尺寸大小一样的替代图片?我想手工改一下。

      VAGH 评论达人 LV.1 1年前 (2015-08-13) [0] [0]
      • @VAGH瀑布流会有困难,除非能知道每一张图的宽高是多少

        Bruno 评论达人 LV.7 1年前 (2015-08-13) [0] [0]
        • @Bruno感谢博主回复 已经解决了,就是在每次lazyload执行完毕后重新调用一下瀑布流的排版方法

          VAGH 评论达人 LV.1 1年前 (2015-08-14) [0] [0]
    6. 1 2 3

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册

    扫一扫二维码分享