js懒加载

懒加载也叫做 延迟加载、按需加载 ，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。

如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长的场景中。

<script>
    var imgs = document.getElementsByTagName('img')
    var docH = document.documentElement.clientHeight
    var n = 0
    fn()
    window.onscroll = fn
    function fn() {
        var imgScroll = document.documentElement.scrollTop
        for (var i = n; i < imgs.length; i++) {
            if (imgs[i].offsetTop - imgScroll <= docH) {
                imgs[i].src = imgs[i].getAttribute('data-src')
                n = i + 1
            }
            if (imgs[i].src) {
                imgs[i].setAttribute('data-src', '')
            }
        }
    }

</script>