前端面试：图片懒加载原理及实现方式

最新推荐文章于 2024-06-09 22:22:00 发布

啃火龙果的兔子

最新推荐文章于 2024-06-09 22:22:00 发布

阅读量132

点赞数

文章标签：前端面试

本文链接：https://blog.csdn.net/qq_43592064/article/details/130943168

版权

图片懒加载是一种优化网页性能的技术，它在初始化时设置图片src为小图或1px透明图，真实图片URL存于data-url属性。当图片进入视口时，通过监听滚动事件或IntersectionObserverAPI替换src为data-url加载图片，减少初始页面加载时间。

摘要由CSDN通过智能技术生成

图片懒加载的原理

初始化时，图片标签的src不能是真实的图片地址，也不可以是空地址或者坏地址(会出现图片加载失败的图标)。

初始化的时候，可以设置图片的src是某一个小型图片。例如一张1px*1px的透明图片。由于所有图片都使用这一张图片，只会发送一次请求，不会增加性能负担。
将图片的真实路径绑定给一个自定义属性，例如data-url。注意：页面的img元素，如果没有src属性，浏览器就不会发出请求去下载图片

<img  data-url="xxx" src="1px.gif" width="100" height="100"/>

定义滚动事件，判断元素进入视口，则将src替换为真正的url地址。利用js提取data-url的真实图片地址赋值给src属性

图片懒加载的实现方法

滚动监听+scrollTop+offsetTop+innerHeight

。。。

滚动监听+getBoundingClientRect()

。。。

intersectionObserve()

<!DOCTYPE html>
<html lang="en">
<body>
    <img src="img/1pxImg.png" data-url="img/1.jpg">
    <img src="img/1pxImg.png" data-url="img/2.jpg">
    <img src="img/1pxImg.png" data-url="img/3.jpg">
    <img src="img/1pxImg.png" data-url="img/4.jpg">
    <img src="img/1pxImg.png" data-url="img/5.jpg">

    <script>
        var imgs = document.getElementsByTagName('img')
        // 观察器实例
        let io = new IntersectionObserver((entires) =>{
            entires.forEach(item => {
                // 原图片元素
                let oImg = item.target
                if (item.intersectionRatio > 0 && item.intersectionRatio <= 1) {
                    oImg.setAttribute('src', oImg.getAttribute('data-url'))
                } 
            })
        })
       // 给每一个图片设置观察器
        Array.from(imgs).forEach(element => {
            io.observe(element) 
        });
    </script>
</body>
</html>