var lazyLoadImg = new LazyLoadImg({
el: document.querySelector('#list'),
mode: 'diy', //默认模式,将显示原图,diy模式,将自定义剪切,默认剪切居中部分
time: 300, // 设置一个检测时间间隔
complete: true, //页面内所有数据图片加载完成后,是否自己销毁程序,true默认销毁,false不销毁
position: { // 只要其中一个位置符合条件,都会触发加载机制
top: 0, // 元素距离顶部
right: 0, // 元素距离右边
bottom: 0, // 元素距离下面
left: 0 // 元素距离左边
},
diy: { //设置图片剪切规则,diy模式时才有效果
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center'
},
before: function () {
},
success: function (el) {
el.classList.add('success')
},
error: function (el) {
el.src = './images/error.png'
}
})
// lazyLoadImg.start() // 重新开启懒加载程序
// lazyLoadImg.destroy() // 销毁图片懒加载程序
图片懒加载插件lazy-load-img
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
- 五月底入驻简书到现在差不多快三个月了,从最初开始的孤军奋战到现在认识一群支持我的小伙伴们,感谢简书这个平台让我结识...