图片懒加载的现代 JavaScript 实现，仅需 10 行代码

zhezhongyun 2025-07-03 02:15 38 浏览

过去，实现懒加载通常需要监听 scroll 事件，并结合 getBoundingClientRect() 等方法计算元素位置，代码不仅繁琐，而且频繁的计算会引发性能问题。

现代浏览器提供了 Intersection Observer API，让我们得以用一种极其高效和简洁的方式来实现懒加载。多简洁？核心逻辑只需 10 行代码。

第一步：HTML 结构准备

懒加载的原理很简单：我们不直接将图片的 URL 放在 src 属性里，而是先放在一个自定义的 data-* 属性（如 data-src）中。src 属性可以指向一个极小的占位符图片（比如一个 1x1 像素的透明 GIF 或低质量的模糊图），以避免出现 broken image 图标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>现代图片懒加载</title>
    <style>
        /* 给图片一个最小高度，以便在加载前占据空间 */
        img {
            display: block;
            margin-bottom: 50px;
            min-height: 200px;
            background-color: #f0f0f0; /* 简单的占位背景色 */
        }
    </style>
</head>
<body>
    <h1>向下滚动查看图片懒加载效果</h1>

    <!-- 使用 class="lazy" 来标识需要懒加载的图片 -->
    <!-- src 指向一个占位符，data-src 存放真实图片地址 -->
    <img class="lazy" src="placeholder.gif" data-src="https://source.example.com/random/800x600?nature" alt="Lazy Loaded Image 1">
    <img class="lazy" src="placeholder.gif" data-src="https://source.example.com/random/800x600?city" alt="Lazy Loaded Image 2">
    <img class="lazy" src="placeholder.gif" data-src="https://source.example.com/random/800x600?people" alt="Lazy Loaded Image 3">
    <img class="lazy" src="placeholder.gif" data-src="https://source.example.com/random/800x600?tech" alt="Lazy Loaded Image 4">
    <img class="lazy" src="placeholder.gif" data-src="https://source.example.com/random/800x600?space" alt="Lazy Loaded Image 5">

    <script src="lazy-load.js"></script>
</body>
</html>

第二步：JavaScript 魔法（10 行代码实现）

现在，让我们见证奇迹。创建一个 lazy-load.js 文件，并写入以下代码：

// 1. 获取所有需要懒加载的图片
const lazyImages = document.querySelectorAll('.lazy');

// 2. 创建一个 IntersectionObserver 实例
const observer = new IntersectionObserver((entries, observer) => {
    // 3. 遍历所有被观察的元素
    entries.forEach(entry => {
        // 4. 如果元素进入视口
        if (entry.isIntersecting) {
            const img = entry.target;
            // 5. 将 data-src 的值赋给 src
            img.src = img.dataset.src;
            // 6. 移除 'lazy' 类，可选，但便于管理
            img.classList.remove('lazy');
            // 7. 停止观察该图片，释放资源
            observer.unobserve(img);
        }
    });
});

// 8. 让 observer 开始观察所有懒加载图片
lazyImages.forEach(image => {
    observer.observe(image);
});

就是这样！没有复杂的计算，没有混乱的事件监听器。代码清晰、高效，并且符合现代 Web 标准。

代码解析：为什么它能工作？

Intersection Observer (交叉观察器) 是一个浏览器 API，它允许我们异步地观察目标元素与其祖先元素或顶级文档视窗（viewport）的交叉状态。通俗地说，它能高效地告诉我们：“这个元素现在进入/离开屏幕了！”

让我们分解一下这 10 行代码：

document.querySelectorAll('.lazy'): 我们选中所有带有 .lazy 类的图片元素。
new IntersectionObserver(callback): 我们创建了一个观察器。它的构造函数接收一个回调函数，当目标元素的可见性发生变化时，这个回调函数就会被触发。
entries: 这是回调函数接收的参数，是一个数组，包含了所有发生可见性变化的被观察元素的信息。
entry.isIntersecting: 这是一个布尔值，true 代表目标元素至少有一部分进入了视口，false 则代表它完全离开了视口。这是我们实现懒加载的关键判断。
img.src = img.dataset.src: 一旦图片可见，我们就执行核心操作：将存储在 data-src 中的真实图片 URL 赋值给 src 属性。浏览器会自动开始下载并显示图片。
observer.unobserve(img): 这是至关重要的一步优化。一旦图片被加载，我们就不再需要观察它了。调用 unobserve 可以告诉观察器停止对该元素的监视，从而节省了宝贵的计算资源。
observer.observe(image): 最后，我们启动观察器，让它开始监视每一个需要懒加载的图片。

进阶优化：预加载

Intersection Observer 还允许我们传入一个配置对象，来更精细地控制“交叉”的定义。其中 rootMargin 属性非常有用。

rootMargin 可以在视口（root）的每一边添加一个“外边距”，提前或延迟触发回调。例如，我们可以让图片在距离进入视口还有 200px 时就开始加载。

const options = {
    root: null, // 使用浏览器视口作为根
    rootMargin: '0px 0px 200px 0px', // 在底部增加 200px 的外边距
    threshold: 0 // 只要有 1 像素交叉就触发
};

const observer = new IntersectionObserver(callback, options);

这样设置后，用户向下滚动时，图片会“提前”加载，当图片真正进入视口时已经准备好了，体验会更加流畅。

Intersection Observer 不仅代码量极少，而且在性能上远超传统方法，因为它将复杂的计算交给了浏览器底层去高效处理，不会阻塞主线程。

margin 属性

上一篇：JS实现轮播图案例(一看就懂，逻辑清晰)
下一篇：探讨小程序开发的布局（小程序开发部署流程）

图片懒加载的现代 JavaScript 实现，仅需 10 行代码

第一步：HTML 结构准备

第二步：JavaScript 魔法（10 行代码实现）

代码解析：为什么它能工作？

进阶优化：预加载

相关推荐

Python每日一库之Beautiful Soup（python mtime）

HTML标签速查手册?别死记硬背了，带你从原理上掌握它!

用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）

推荐36种免费React模板和主题「干货」

旧手机新玩法，MacroDeck进阶指南

TrueNAS SCALE官方文档之人性化译注01-硬件配置指南

业余无线电UV段几种常见天线（uv段最强天线）

免费领取→可编辑危废标签模板首发!

今年最常见的前端面试题，你会做几道?

GitHub和码云上，7个h5页面制作工具推荐