原文地址

https://github.com/visugar/FrontEnd-examples/blob/master/07lazyLoading/index.html

实现思路

1. 在img元素时，自定义一个属性data-src，用于存放图片的地址；
2. 获取屏幕可视区域的尺寸；
3. 获取元素到窗口边缘的距离；
4. 判断元素时候再可视区域内，在则将data-src的值赋给src,否则，不执行其他操作；
   实质： 当图片在可视区域内时，才加载，否则不加载；

代码

HTML

 <div class="container">
        <ul>
              <li>
                <img class="lazy-img" src="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524570254234&di=0c347308302493f1485bd95b087fa35a&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F13%2F83%2F81%2F06v58PICTc7_1024.jpg" alt="图片加载失败">
            </li>
            <li>
                <img class="lazy-img" src="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524570254233&di=a3d423d02a0db6a84770ff7fe85f0a0b&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F16%2F83%2F14%2F51d58PICZza_1024.jpg" alt="图片加载失败">
            </li>
            <li>
                <img class="lazy-img" src="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524570254233&di=fc02c4ffe92172193dab7f6e4c89ef57&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2FQDstweS8mbD8B-_i5pdGnQ%3D%3D%2F5771925872429353698.jpg"
                    alt="图片加载失败">
            </li>
            <li>
                <img class="lazy-img" src="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524570254232&di=280eead6788c5397e5dc5182b3e9144b&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F19%2F22%2F13%2F5685525b2caf7_1024.jpg"
                    alt="图片加载失败">
            </li>
            <li>
                <img class="lazy-img" src="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524570254201&di=56fc27944a2ed878279008766a13de37&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F14%2F34%2F54%2F07S58PICv8P_1024.jpg" alt="图片加载失败">
            </li>
            <li>
                <img class="lazy-img" src="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524570254201&di=789fd4384b866e6e400d6424612aac23&imgtype=0&src=http%3A%2F%2Fimg.bimg.126.net%2Fphoto%2F52lPHDL1HDS7fySH-7pwjQ%3D%3D%2F5771925872429353701.jpg"
                    alt="图片加载失败">
            </li>
            <li>
                <img class="lazy-img" src="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524570254201&di=04eda0b71093d7336be3c0dc599a1760&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fu%2F00%2F00%2F95%2F36%2F55e9305941c16.jpg"
                    alt="图片加载失败">
            </li>
            <li>
                <img class="lazy-img" src="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524570254200&di=cf50429d92d4c82936240b6cfeeb464f&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F77%2F17%2F16j58PICHq7_1024.jpg" alt="图片加载失败">
            </li>
        </ul>
    </div>

CSS

body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

ul,
ul li {
    list-style: none;
}

ul {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

li {
    width: 100%;
    height: 100%;
}

img {
    display: block;
    width: 100%;
    height: 100%;
}

JS

//当页面加载或页面滚动或窗口大小改变时,调用懒加载初始化方法
window.onload = window.onresize = window.onscroll = function() {
    loazyLoad.init();
};
/**
 * 根据id获取DOM元素
 * 
 * @param {String} id 需要获取的元素的id
 */
function getId(id) {
    return document.getElementById(id);
}
/**
 * 根据样式名获取DOM元素
 * 
 * @param {String} cls 需要获取元素的样式名
 * @returns 
 */
function getEleByCls(cls) {
    return document.getElementsByClassName(cls);
}
// 懒加载
var loazyLoad = {
    // 屏幕可视窗口高度
    wh: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
    // 屏幕可视窗口宽度
    ww: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    init: function() {
        var that = this;
        // 获取所有的图片
        var aImg = getEleByCls("lazy-img");
        for (var i = 0; i < aImg.length; i++) {
            if ((that.getClientRect(aImg[i]).top > 0 && that.getClientRect(aImg[i]).top < this.wh) || (that.getClientRect(aImg[i]).bottom > 0 && this.getClientRect(aImg[i]).bottom < that.wh)) {
                //如果图片出现在浏览器可视区域中则用img标签中自定义的data-src值去替src路径
                aImg[i].src = aImg[i].dataset.src;
            }
        }
    },
    // 获取元素到窗口边缘的距离
    getClientRect: function(target) {
        return {
            top: target.getBoundingClientRect().top,
            right: target.getBoundingClientRect().right,
            bottom: target.getBoundingClientRect().bottom,
            left: target.getBoundingClientRect().left
        };
    }
}

结果