bLazy.js 轻量+响应式图片的 延迟加载脚本

bLazy 是一个不依赖于第三方JS库(如 jQuery)的lazyLoad脚本,压缩版只有几Kb,而且支持根据不同的设备宽度显示不同大小的图片,这个功能对于响应式开发非常有用,也是倡萌推荐的主要原因。可喜的是,这么好的脚本,支持所有主流的浏览器,包括 IE7+。

下面的样例代码的功能就是,当设备宽度小于 420px 的时候,就加载小图片,否则加载大图片,同时,图片加载后移除加载器。

HTML:

    <img class="b-lazy"
	 src="placeholder-image.jpg"
	 data-src="image.jpg"
	 data-src-small="small-image.jpg"
	 alt="Image description" />

JavaScript:

    var bLazy = new Blazy({
        breakpoints: [{
	    width: 420 // Max-width
          , src: 'data-src-small'
	}]
      , success: function(element){
	    setTimeout(function(){		// We want to remove the loader gif now.
		// First we find the parent container
		// then we remove the "loading" class which holds the loader image
		var parent = element.parentNode;
		parent.className = parent.className.replace(/\bloading\b/,'');
	    }, 200);
        }
   });

实际效果演示:http://dinbror.dk/blazy/

未经允许不得转载:大谋菠萝格 » bLazy.js 轻量+响应式图片的 延迟加载脚本

打赏 收藏
分享到: +

评论 6

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)
  • 网址 (选填)
  1. #1
    涂涂研版
    [B]已经做好插件。。。[/B]
    涂涂研版 2015-11-05 18:48:43回复 取消评论