懶加載，按需加載

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