【前端知识之CSS】CSS图片懒加载

饭啊饭°

已于 2022-09-07 11:29:53 修改

阅读量2.2k

点赞数 1

分类专栏：前端知识之html+CSS 文章标签：前端 css html5

于 2022-05-23 12:48:46 首次发布

本文链接： https://blog.csdn.net/weixin_44337386/article/details/124922900

版权

本文探讨了前端面试中的CSS图片懒加载技术，包括其定义、优点、实现思路和三种具体方法：getBoundingClientRect().top + innerHeight、scrollTop+offsetTop+innerHeight以及intersectionObserve()。通过这些方法，可以提升用户体验，减少不必要的资源加载。

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

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍CSS图片懒加载的实现方法。

文章目录

前言
一、什么是图片懒加载
二、图片懒加载的实现思路
三、getBoundingClientRect().top + innerHeight
四、scrollTop+offsetTop+innerHeight
五、intersectionObserve()

一、什么是图片懒加载

图片懒加载就是延迟加载，即当对象需要用到的时候再去加载。比如加载一个页面，这个页面很长很长，长到浏览器的可视区域装不下，懒加载就是优先加载可视区域的内容，其他部分等进入了可视区再加载。
图片懒加载的好处：
（1）全部加载会影响用户的体验。全部加载浪费时间，用户不能第一时间在可视区域看到内容；
（2）浪费用户的流量，有些用户并不想全部看完，全部加载会浪费大量的流量。

二、图片懒加载的实现思路

HTML5支持使用data-前缀设置自定义属性。dataset自定义属性的格式：data-xx；前面的data-是固定的，后面的xx一般为表示与自定义属性相关的字符串。比如，img的src属性可以设置为data-src，当需要获取到这个属性时，可以用Element.data.src得到。
节流的应用：由于用户可能出现反复反复滑动的情况，因此图片不应该立刻加载，而应该使用节流适当延时执行加载操作。关于节流的知识可以见博客：【前端面试必知】节流知识
所以图片懒加载很重要的就是它的判断条件，即什么时候加载这张图片？有三种方式都可以实现

三、getBoundingClientRect().top + innerHeight

getBoundingClientRect().top：元素至可视窗口的高度
window.innerHerght：可视窗口的高度
具体解释如图所示：

因此，当getBoundingClientRect().top < window.innerHeight时，应该加载图片。

具体代码：

<body>
    <div class="box">
        <ul>
            <li>
                <img data-src="img1.jpg" alt="">
            </li>
            <li>
                <img data-src="img2.jpg" alt="">
            </li>
            <li>
                <img data-src="img3.jpg" alt="">
            </li>