/**
* Created by xuxinmin on 17/4/7.
* 功能:图片懒加载
* 条件:class="img-lazy" data-src=""
*/
let lazyloadimg = {
imgloading: function() {
let _lazyImg = document.getElementsByClassName('img-lazy'),
_defauleImg = '图片处理默认图片',
_imgoffsettop = 0,
_this = this;
for (let i = 0; i < _lazyImg.length; i++) {
_imgoffsettop = _this.offsettopbody(_lazyImg[i]);
if (_imgoffsettop < window.scrollY + window.innerHeight) {
_lazyImg[i].onerror = function() {
this.setAttribute('src', _defauleImg);
};
if (_lazyImg[i].getAttribute('src') !== _defauleImg && _lazyImg[i].getAttribute('src') !== _lazyImg[i].getAttribute('data-src')) {
_lazyImg[i].setAttribute('src', _lazyImg[i].getAttribute('data-src'));
}
}
}
},
offsettopbody: function(obj) { //计算offsetTop
let offsettop = 0;
do {
if (obj.offsetParent === null) {
return;
} else {
obj = obj.offsetParent;
offsettop += obj.offsetTop;
}
} while (obj.tagName !== 'BODY');
return offsettop;
},
init: function() {
let _this = this;
_this.imgloading(); //图片懒加载
window.onscroll = function() {
_this.imgloading(); //图片懒加载
};
}
};
export {
lazyloadimg
};
/*使用*/
//图片懒加载导入
import {
lazyloadimg } from
'../template/lazyloadimg';版权声明:本文为u010772819原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。