浅谈一下

懒加载（Lazy Loading）是一种在软件开发中常用的优化技术，它主要用于延迟加载资源，直到真正需要使用的时候才进行加载。这样可以减少初始加载的时间和资源消耗，并提升用户体验。

在前端开发中，懒加载通常用于图片、视频等资源的加载。当页面滚动到某个元素时，再去加载该元素所需的资源，而不是一次性加载所有内容。这样可以避免页面初始加载时的延迟和带宽消耗，提高页面加载速度。

那么我们如何实现一个懒加载？？

思考

要实现懒加载，我们该如何去做？

放上许多图片

放上许多图片模拟

获取屏幕大小和图片大小

要想实现图片暴露在屏幕上就开始加载，就得获取屏幕大小和图片大小

动态添加图片路径

要实现不暴露不加载，一暴露就加载，我们就得动态添加一个src路径，当暴露时，添加路径，就可以实现懒加载了

实现

放上图片

html 复制代码

<img class='img-item' src="" data-original="https://media.indiedb.com/images/downloads/1/141/140388/logo_tup.jpg" alt="">
<img class='img-item' src="" data-original="https://ts1.cn.mm.bing.net/th/id/R-C.fe8303a785a33189e4e24ba530a70382?rik=dVxkKcgbWxyRLQ&riu=http%3a%2f%2fwww.laverocks.co.uk%2fgilslandmag%2fdesktops%2fxtup_800.jpg.pagespeed.ic.wb_S4EVXgU.jpg&ehk=4fkPQNq86UOkGhr71pywhwmmtLYHv6hcTrwLxq9%2fbBA%3d&risl=&pid=ImgRaw&r=0" alt="">
<img class='img-item' src="" data-original="https://ts1.cn.mm.bing.net/th/id/R-C.d4bfc069bb714818229338c5bd04b59e?rik=OutLpnfhKxV%2bKA&riu=http%3a%2f%2fwww.appzyw.net%2fupfiles%2fimage%2f202001%2f20200112113023601.jpg&ehk=0ot9LOln80CuJBFt66nhpE1JUD0dOt3hXb8dQJmY0Y4%3d&risl=&pid=ImgRaw&r=0" alt="">
<img class='img-item' src="" data-original="https://ts1.cn.mm.bing.net/th/id/R-C.7ecdb52cb56c0e121025e1b752296fb3?rik=tTsFgweG5QNWIQ&riu=http%3a%2f%2fpic.bizhi360.com%2fbbpic%2f27%2f9727_7.jpg&ehk=fzaYq%2brx5WqWQ2zu7P3Mqgnmwiq4Nx%2fbDftpz3vaf7w%3d&risl=&pid=ImgRaw&r=0" alt="">
<img class='img-item' src="" data-original="https://pic4.zhimg.com/v2-497305b2ee426db31db4e5d2125fbb87_r.jpg" alt="">

在这里，我们并没有直接把文件路径丢给src，而是给了一个data-original，在后面，我们将动态让src=data-original

获取屏幕大小

js 复制代码

 let viewHeight = window.innerHeight

动态添加路径

js 复制代码

function lazyLoad(){
        let imgs = document.querySelectorAll('img')
        Array.from(imgs).forEach(el=>{
            let rect = el.getBoundingClientRect()
            if(rect.top<viewHeight){
                let image = new Image()
                image.src = el.dataset.original
                image.onload = function(){
                    el.src = image.src
                }
                el.removeAttribute('data-original')
            }
        })
    }

使用 document.querySelectorAll() 方法获取页面中所有需要懒加载的图片元素，这里使用了选择器 img。
使用 Array.from() 方法将 NodeList 对象转换为数组。
遍历每个元素，获取其相对于视口的位置信息。
如果元素的顶部位置小于视口高度，则表示该元素已经进入了可视区域，需要进行懒加载。
创建一个新的 Image 对象，并将其 src 属性设置为对应元素的 data-original 属性值。
在图片加载完成后更新元素的 src 属性，并移除其 data-original 属性，避免重复加载。

细节

在页面首次打开的时候，我们就得调用一次lazyload()方法，如果不调用，就不会加载一开始暴露在屏幕上的图片
我们需要添加一个监听器，监听window，当发生滚动事件的时候调用lazyload()方法，判断是否有图片进入屏幕

js 复制代码

    lazyLoad()
    window.addEventListener('scroll',lazyLoad)

结尾

本篇较为简单，但是懒加载是面试时经常会问的内容，合理运用懒加载，会给你的程序带来许多好处...

懒加载是如何实现的

浅谈一下

思考

实现

细节

结尾