图片懒加载就是页面先请求1k甚至更小的模糊图片，当页面滚动到或快滚动到可视窗口的时候，加载高清图片，虽然加载模糊图片，增加了http请求次数和流量，但使得首次打开速度加快。网站图片很多使用后用户体验翻倍！

图片懒加载

html

<img src="./img/模糊图片.png" alt="" data-src="./img/高清图片.png">

js

function lazyLoad(images) {
    // 2.1 获取可视窗口的高度
    var viewHeight = window.innerHeight;
    // 2.3 获取浏览器滚动条的高度（也就是内容向上滚动了多高）
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
    for (var i = 0; i < images.length; i++) {
        // 这里使用立即执行函数，支持ES6的环境可以直接使用let i = 0，具体原因可自行百度立即执行函数
        (function (i) {
            // 2.2 获取图片距离视图窗口顶部的距离
            var imageToTop = images[i].offsetTop;
            // 2.4 判断图片是否可见，如果图片距可视窗口顶部的距离小于可视窗口的高度与滚动条高度之和，则该图片可见
            if (imageToTop - viewHeight - scrollTop < 0) {
                // 2.5 设置图片路径
                // 获取真实图片的路径
                var realSrc = images[i].getAttribute('data-src');
                // 设置图片的路径
                images[i].setAttribute('src', realSrc);
            }
        })(i)
    }
}

用法

// 监听页面滚动
window.onscroll=function(){
    // 获取页面全部需要懒加载的图片dome
    var imgs = document.getElementsByClassName('lazy-img');
    lazyLoad(imgs);// 调用懒加载函数
}
// 监听页面加载完成后立刻执行当前视口需要加载高清图片
window.onload = function () {
    // 获取页面全部需要懒加载的图片dome
    var imgs = document.getElementsByClassName('lazy-img');
    lazyLoad(imgs);// 调用懒加载函数
}