bLazy.js 轻量级支持响应式图片的lazyLoad脚本 |
| 2021-01-21 22:59:59 35资源网(www.35d.net) |
| js |
下载本资源原文网址：http://www.daima.org/js/js17064.html 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);
}
});
|
|
|
|
|
|
资源大全_资源下载网站：www.35d.net 本站资源仅限研究学习使用，如需商用请联系版权方， 本站事务联系QQ：939804642
|
|
