CSS怎样实现图片懒加载？intersection observer应用-css教程-PHP中文网

答案是使用intersection observer实现图片懒加载。1. 用data-src属性存放真实图片地址，src指向占位图；2. 通过javascript创建intersection observer实例，监听图片元素进入视口的状态；3. 当元素进入视口（配合rootmargin提前加载）时，将data-src的值赋给src，触发图片加载，并停止观察该元素；4. 对不支持的浏览器降级处理，直接加载图片。该方案避免了scroll事件导致的性能问题，利用浏览器原生异步机制，提升页面流畅度和用户体验，且可扩展应用于无限滚动、广告曝光、动画触发等多种场景，是当前最优雅高效的解决方案。

CSS怎样实现图片懒加载？intersection observer应用

图片懒加载，尤其是在现代前端开发中，早已不是什么新鲜事，但如何优雅高效地实现它，却是个值得深思的问题。我的答案很简单：用

Intersection Observer

登录后复制

。它几乎是目前最现代、性能最优的解决方案，能让你的页面在用户体验和加载速度上都迈上一个新台阶。

解决方案

实现图片懒加载，核心思路就是让图片在进入用户视口之前不加载，或者只加载一个轻量级的占位符。

Intersection Observer

登录后复制

API 提供了浏览器原生级别的支持，可以异步观察目标元素与祖先元素或文档视口之间的交叉状态。

首先，HTML 部分，我们不再直接使用

src

登录后复制

属性，而是用

data-src

登录后复制

来存放图片的真实地址，并可以添加一个低分辨率的占位图或

loading

登录后复制

动画。

立即学习“前端免费学习笔记（深入）”；

<img  alt="图片描述" class="lazyload-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<img  alt="另一张图片" class="lazyload-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
<!-- 更多图片... -->

登录后复制

CSS 部分，其实可以很简单，或者根据你的需求做一些加载动画。这里我们先保持简单。

.lazyload-img {
    display: block; /* 确保图片独占一行，方便观察 */
    width: 100%; /* 示例：图片宽度 */
    min-height: 200px; /* 示例：给个最小高度，避免布局跳动 */
    background-color: #f0f0f0; /* 占位背景色 */
}

登录后复制

关键在于 JavaScript。我们需要创建一个

Intersection Observer

登录后复制

实例，并给它一个回调函数，当图片进入视口时，这个回调函数就会被触发。

document.addEventListener('DOMContentLoaded', () => {
    const lazyImages = document.querySelectorAll('.lazyload-img');

    if ('IntersectionObserver' in window) {
        let observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    const src = img.getAttribute('data-src');
                    if (src) {
                        img.src = src;
                        img.removeAttribute('data-src'); // 加载完成后移除data-src
                        observer.unobserve(img); // 停止观察已加载的图片
                    }
                }
            });
        }, {
            rootMargin: '0px 0px 200px 0px', // 提前200px加载
            threshold: 0 // 只要有一个像素可见就触发
        });

        lazyImages.forEach(img => {
            observer.observe(img);
        });
    } else {
        // Fallback for browsers that don't support Intersection Observer
        // 这部分可以考虑使用滚动事件或者直接加载所有图片
        lazyImages.forEach(img => {
            const src = img.getAttribute('data-src');
            if (src) {
                img.src = src;
                img.removeAttribute('data-src');
            }
        });
    }
});

登录后复制

这段代码的核心逻辑是：当

lazyload-img

登录后复制

元素进入（或即将进入）视口时，

Intersection Observer

登录后复制

会通知我们，然后我们取出

data-src

登录后复制

中的真实图片地址，赋值给

src

登录后复制

属性，图片就开始加载了。加载完成后，我们会让观察器停止观察这个元素，避免重复操作，也节省资源。

为什么说Intersection Observer是图片懒加载的终极答案？

说实话，我个人是真受够了那些基于滚动事件的图片懒加载方案。过去，我们为了实现懒加载，不得不监听

scroll

登录后复制

事件，然后在回调里不断计算每个图片元素距离视口顶部的距离，判断它们是否进入了可视区域。这听起来似乎没什么问题，但实际操作起来，性能简直是噩梦。想想看，每次滚动都触发大量的

getBoundingClientRect()

登录后复制

调用，这会导致浏览器频繁地进行布局计算（layout thrashing），页面卡顿、掉帧是家常便饭，用户体验直线下降。尤其是在移动设备上，资源有限，这种性能开销更是雪上加霜。

Intersection Observer

登录后复制

的出现，彻底改变了这种局面。它不是基于同步的滚动事件来判断的，而是利用浏览器内部的优化机制，异步地观察元素交叉状态。这意味着什么？意味着你的 JavaScript 不再需要自己去计算位置，浏览器会在合适的时机，以最高效的方式告诉你“嘿，这个元素现在可见了！”或者“它已经离开了！”。它运行在主线程之外，不会阻塞页面的渲染，极大地提升了滚动性能和用户体验。从我个人的开发经验来看，一旦用上了

Intersection Observer

登录后复制

，那些恼人的性能瓶颈几乎瞬间消失，页面滚动变得异常流畅。它就像是浏览器为你量身定制的一个“智能管家”，帮你默默处理这些繁琐又耗性能的判断逻辑，让你能更专注于业务逻辑的实现。

Intersection Observer的配置参数有哪些实用技巧？

Intersection Observer

登录后复制

的强大之处，除了其异步和高性能的特性外，还在于它提供了几个非常灵活的配置参数，让你能精准控制观察行为。理解并善用它们，能让你的懒加载方案更加精细化。

首先是

root

登录后复制

参数。它决定了观察器所观察的目标元素与哪个容器进行交叉。默认情况下，

root

登录后复制

是浏览器视口（

null

登录后复制

或

undefined

登录后复制

）。但如果你有一个可以滚动的特定区域，比如一个弹窗内的图片列表，你可以将

root

登录后复制

设置为那个可滚动的元素。这样，图片只有在进入那个特定容器的可见区域时才会加载，而不是整个浏览器视口。这在组件化开发中尤其有用，避免了不必要的全局观察。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

然后是

rootMargin

登录后复制

，这个参数我个人觉得是懒加载场景下最实用的一个。它允许你为

root

登录后复制

元素（通常是视口）增加或减少一个边距。比如，设置

'0px 0px 200px 0px'

登录后复制

，就意味着当图片距离视口底部还有 200 像素时，它就会被视为“进入视口”并开始加载。这就像是给懒加载图片设置了一个“预加载区域”。用户还没滚动到图片位置，图片就已经悄悄加载好了，避免了用户在滚动时看到图片突然出现的突兀感，极大地提升了用户感知的加载速度和流畅度。你可以根据页面内容和用户习惯，灵活调整这个值。太小可能还是会闪现，太大则失去了懒加载的意义，加载了太多不必要的资源。

最后是