JS-图片的懒加载

懒加载主要是为了优化页面渲染，是前端性能优化的重要方法。主要是通过图片或数据的延时加载，加快页面渲染的速度，让第一次打开页面的速度变快，只有滑动到某个区域，才加载到真实的图片，这样也节省了用户的流量，哈哈。
实现思路：

1. 把所有需要延迟加载的图片用一个盒子包起来，设置宽高和默认占位图。
2. 开始让所有的image的src为空，把真实的图片地址放到一个自定义属性当中，让开始所有的image隐藏。
3. 等待其他资源加载完后，再开始加载图片。
4. 对于很多图片，页面滚动的时候，当前图片区域完全显示出来后再加载真实的图片。
   
   浏览器可视区高度：window.innerHeight
   浏览器滚动条滚过的高度：
   document.body.scroll || documentElement.scrollTop
   元素距文档顶部的高度：img.offsetTop
   判断页面加载的依据：
   img.offsetTop < window.innerHeight + documentElement.scrollTop

        let imgs = document.querySelectorAll('img');

        function delay() {
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop,
                winTop = window.innerHeight;
            for (let i = 0; i < imgs.length; i++) {
                if (imgs[i].offsetTop < scrollTop + winTop) {
                    imgs[i].className = 'fade';
                    imgs[i].src = imgs[i].getAttribute('data-src');
                }
            }
        }
        window.onscroll = function () {
            delay()
        }
        window.onload = function () {
            delay()
        }

（若有不对望指出）