陈德馨

轻量级支持响应式图片的lazyLoad脚本

778人参与 |分类: 工具库|时间:2016年03月14日 16:22

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 下载及详细参数使用说明,请访问:http://dinbror.dk/blog/blazy/

GitHub地址:https://github.com/dinbror/blazy/ 


来源:陈德馨博客(微信/QQ号:35435164),转载请保留出处和链接!

地址:

必填

选填

选填

◎已有 0 人评论,请发表您的观点。