请叫我痘痘君前端 2025-06-18

10行JavaScript代码实现图片懒加载

AI 概述

第一步：HTML 结构准备第二步：JavaScript 魔法（10 行代码实现）代码解析：为什么它能工作？进阶优化：预加载过去，实现懒加载通常需要监听 scroll 事件，并结合 getBoundingClientRect() 等方法计算元素位置，代码不仅繁琐，而且频繁的计算会引发性能问题。现代浏览器提供了 Intersection Observe...

文章目录隐藏

第一步：HTML 结构准备
第二步：JavaScript 魔法（10 行代码实现）
代码解析：为什么它能工作？
进阶优化：预加载

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

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

第一步：HTML 结构准备

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

<!D0CTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>现代图片侧加载</title>
  <style>
    /*给围片一个最小高度，以便在加藏前与探空间*/
    img {
      display: block;
      margin-botton: 50px;
      min-he1ght: 288px;
      background-color:#fofaf8;/*简单的占位背最色*/
    }
  </style>
</head>
<body>
    <h1>向下滚动查看图片懒加载效果</h1>
    <!--使用 class="lazy" 来标识需要懒加载的图片-->
    <!-- src 指向一个占位持，data-src 存效真要图片地址 -->
    <img class="lazy" src="placeholder.gif" data-src="https://source.example.com/random/800x680?nature" alt="Lazy Loaded Image 1">
    <ing class="lazy" src="placeholder.gif" data-src="https://source.example.com/random/880x688?city" alt="Lazy Loaded image 2">
    <ing class="lazy" src="placeholder.gif" data-src="https://source.example.com/random/888x680?people" alt="Lazy Loaded Image 3">
    <img class="lazy" src="placeholder.gif" data-src="https://source.example.com/random/886x6007tech" alt="Lazy Loaded Image 4">
    <img class="lazy" src="placeholder.gif" data-src="https://source.example.com/random/80x600?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.创建一个 Intersection0bserver 实例
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 不仅代码量极少，而且在性能上远超传统方法，因为它将复杂的计算交给了浏览器底层去高效处理，不会阻塞主线程。

以上关于10行JavaScript代码实现图片懒加载的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 1 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

JavaScript 图片懒加载懒加载

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 10行JavaScript代码实现图片懒加载