window.onload = function() {
let images = document.querySelectorAll('img');
for(let i = 0; i < images.length; i++) {
LazyImageLoader.detect(images[i]);
}
};
const lazyImageMap = {};
var lazyImageArray = [];
const TIME_OUT = 64;
const LOADING = 'LOADING';
const LOADED = 'LOADED';
var LazyImageLoader = {
inited: false,
_onLoadHandler: function(img) {
lazyImageMap[img.src] = true;
img.dataset['status'] = LOADED;
const clientWidth = window.screen.width;
const imgWidth = parseInt(img.getAttribute('width'));
const imgHeight = parseInt(img.getAttribute('height'));
const realHieght = imgHeight * clientWidth/imgWidth;
img.src = img.dataset['orgional'];
if(clientWidth < 750) {
if(parseInt(img.getAttribute('width')) < 540) {
img.setAttribute('style', 'width: auto !important');
img.parentElement.setAttribute('style','text-align:center');
} else {
img.setAttribute('style','border-style: none;width: 100%;margin: .5rem 0;height:'+realHieght+'px !important');
}
}
img.dataset['status'] = LOADING;
img.dataset['orgional'] = '';
},
_onErrorHandler: function(img) {
img.target.src = 'https://www.lishijie.net/utils/404.png'
},
detect: function(img) {
if(!img) return;
if(lazyImageMap[img.dataset['orgional']]) {
img.src = img.dataset['orgional'];
return;
}
lazyImageArray.push(img);
if(!LazyImageLoader.inited) {
function check() {
let winHeight = window.innerHeight;
let winWidth = window.innerWidth;
lazyImageArray = lazyImageArray.filter(function(img) {
if(img.dataset['status'] == LOADED || img.dataset['status'] == LOADING) {
return false;
} else {
return true;
}
});
lazyImageArray.forEach(function(img) {
if(img.dataset['status']) return;
let rect = img.getBoundingClientRect();
let {top, right, left, bottom} = rect;
if((top|right|left|bottom) == 0) {
img.dataset['status'] = LOADED;
return;
}
if(((top > 0 && top < winHeight) || (bottom > 0 && bottom <= winHeight))
&& ((left > 0 && left <= winWidth) || (right > 0 && right <= winWidth))) {
img.onload = LazyImageLoader._onLoadHandler(img);
img.onerror = LazyImageLoader._onErrorHandler;
}
});
setTimeout(check, TIME_OUT);
}
setTimeout(check, TIME_OUT);
LazyImageLoader.inited = true;
}
}
}
demo地址：http://file.lishijie.net/201801/a1eb21eb71e04021b358e5d0175cfd3b.html?Expires=1831611747&OSSAccessKeyId=LTAI4NFfN9bxQD6m&Signature=%2FSAYy733vKbKr0KuoU8N8%2BLyiNg%3D