图片的懒加载

所谓图片懒加载，就是想让页面在展示图片的时候，不一下子全部开始加载，而是等到屏幕快滑到该图片的时候，再开始加载。
那么什么时候开始加载呢？
则：已加载高度 + 屏幕高度 >= 未加载区域到最上方的距离-20 (看下图更容易理解)

//首先需要自定义一个属性，将图片的真实路径放入 即data-realSrc
<img src="./images/bg_pic.png" data-realSrc="./images/zhenshitupian.jpg" class="images">
<script>
    //定义一个图片懒加载的函数
    function lazyImg() {
        //获取页面已经滚动的高度，和当前设备的高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //获取所有的图片资源
        var images = document.getElementsByClassName('images');
        //遍历图片 通过当前图片的自定义属性 找到真实的图片路径
        for (var img of images) {
            //找到当前图片距离页面最上面的距离 <= 页面已经滚动的高度+当前设备的高度
            //替换图片的资源 把真实的图片路径替换到当前图片的scr
            if (((img.offsetTop - 20) <= (scrollTop + clientHeight)) && (img.getAttribute('data-realSrc'))) {
                var realSrc = img.getAttribute('data-realSrc');
                img.src = realSrc;
                img.removeAttribute('data-realSrc');
            }
        }
    }
    //页面加载和滚动时 调用懒加载函数
    window.onload = lazyImg;
    window.onscroll = lazyImg;