您现在的位置是:网站首页> 软件下载软件下载

bLazy.js 轻量级支持响应式图片的lazyLoad脚本 下载-

2021-08-30 100人已围观

简介 bLazy.js 轻量级支持响应式图片的lazyLoad脚本 下载-

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

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



HTML:
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);
}
});

下载资源

-六神源码网