原理

1.获取当前页面所有的img，得到imgs数组

2.定义一个变量num，用来记录展示的图片id

3.可视窗口的高度 – 当前元素顶部距离窗口顶部的高度 > 0， 说明该图片在可视窗口内，那么加载该图片

2.赋值，nums = i + 1

实现

DOM结构（去淘宝下载一些图片到本地）

<div class="container">
    <div class="img">
        <img src="https://juejin.cn/post/images/1.webp" alt="加载中" class="pic">
    </div>
    <div class="img">
        <img src="https://juejin.cn/post/images/2.webp" alt="加载中" class="pic">
    </div>
    <div class="img">
        <img src="https://juejin.cn/post/images/3.webp" alt="加载中" class="pic">
    </div>
    <div class="img">
        <img src="https://juejin.cn/post/images/4.webp" alt="加载中" class="pic">
    </div>
    <div class="img">
        <img src="https://juejin.cn/post/images/5.webp" alt="加载中" class="pic">
    </div>
    <div class="img">
        <img src="https://juejin.cn/post/images/6.webp" alt="加载中" class="pic">
    </div>
    <div class="img">
        <img src="https://juejin.cn/post/images/7.webp" alt="加载中" class="pic">
    </div>
    <div class="img">
        <img src="https://juejin.cn/post/images/8.webp" alt="加载中" class="pic">
    </div>
    <div class="img">
        <img src="https://juejin.cn/post/images/9.webp" alt="加载中" class="pic">
    </div>
    <div class="img">
        <img src="https://juejin.cn/post/images/10.webp" alt="加载中" class="pic">
    </div>
    
</div>
复制代码

JS代码

    function lazyload() {
        const imgs = document.getElementsByTagName('img')
        let num = 0
        // 可视窗口的高度，在当代浏览器中使用window.innerHeight获取，在低版本的ie浏览器中使用document.documentElement.clientHeight获取
        const viewHeight = window.innerHeight || document.documentElement.clientHeight

        for (let i = num; i < imgs.length; i++) {
            const top = imgs[i].getBoundingClientRect().top
            if (viewHeight - top > 0) {
                imgs[i].src = imgs[i].getAttribute('data-src')
                num = i + 1
            }
        }
    }
    
    window.addEventListener('scroll', lazyload, false)
    
复制代码