js实现懒加载 最简单

实现前得先知道一下js里的几个高度：
视口高度：document.documentElement.clientHeight
滚动高度：document.documentElement.scrollTop || document.body.scrollTop
元素距离最顶端高度：dom元素.offsetTop

先说一下思路：
1 img中的src先都用同一张loading的图片占住，然后把真正要显示的图片放data-src里
2 先获取图片dom的列表以及有多少张图片
3 然后写一个lazyLoad函数
4 函数中先获取视口以及滚动的宽度
最重要的就是下面这几点了：
5 循环图片dom元素列表，如果dom元素距离顶端的高度小于视口加上滚动的高度，就证明他在视口内了
6 在视口内就需要给他将data-src的值赋给src

代码如下：

<script>
    const imgLen = document.getElementsByTagName('img').length
    const imgDomList = document.getElementsByTagName('img')

    lazyLoad()

    window.onscroll = lazyLoad

    function lazyLoad(){
        const seeHeight = document.documentElement.clientHeight
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop

        for(let i=0;i<imgLen;i++){
            debugger
            if(imgDomList[i].offsetTop < seeHeight + scrollTop){
                if(imgDomList[i].getAttribute('src')==='./1.jpg'){
                    imgDomList[i].src = imgDomList[i].getAttribute('data-src')
                }
            }
        }
    }

</script>