1.2 代码

javascript

// 节流函数：控制函数高频触发，避免滚动时性能卡顿
function throttle(func, wait) {
    let timeout = null; // 定时器标识，用于控制执行时机
    return function () {
        if (!timeout) { // 若定时器不存在，说明可以执行函数
            timeout = setTimeout(() => {
                func.apply(this, arguments); // 执行目标函数，保留this和参数
                timeout = null; // 执行完成后重置定时器
            }, wait);
        }
    };
}


function lazyLoad() {
    const lazyImages = document.querySelectorAll('img.lazy'); // 获取所有待加载的图片
    const windowHeight = window.innerHeight; // 获取视口高度


    lazyImages.forEach(img => {
        // 跳过已加载的图片（已移除lazy类）
        if (!img.classList.contains('lazy')) return;


        const rect = img.getBoundingClientRect(); // 获取图片的位置信息（相对于视口）
        // 核心判断：图片顶部进入视口下方，且底部未完全离开视口上方 → 图片进入视口
        if (rect.top < windowHeight && rect.bottom > 0) {
            if (img.dataset.src) {
                console.log('Loading image via Scroll:', img.dataset.src);
                img.src = img.dataset.src; // 替换src，触发真实图片加载
                img.removeAttribute('data-src'); // 移除自定义属性，避免重复加载
                img.classList.remove('lazy'); // 移除lazy类，标记为已加载
                img.classList.add('loaded'); // 添加loaded类，实现透明度过渡
            }
        }
    });
}


// 节流处理懒加载函数，200ms执行一次
const throttledLazyLoad = throttle(lazyLoad, 200);


// 监听滚动事件，触发节流后的懒加载
document.addEventListener('scroll', throttledLazyLoad);
// 窗口大小变化时，重新判断图片位置
window.addEventListener('resize', throttledLazyLoad);
// 页面加载完成后，初始化检查首屏图片
document.addEventListener('DOMContentLoaded', lazyLoad);

1.3 代码实现效果

观察界面滚动图片变化与控制台打印：

1.4 该方案的缺点

❌ 性能损耗：即使加了节流，scroll事件仍会高频触发，存在一定的性能开销；

❌ 代码冗余：需要手动计算元素与视口的位置关系，逻辑易出错，维护成本高；

❌ 适配性差：在移动端、嵌套滚动等复杂布局中，位置计算容易失效，适配成本高。

1.5 关键 API 解析

• throttle (func, wait)：自定义节流函数，控制高频事件触发频率，避免性能卡顿。

• func：需要被节流的目标函数（此处为 lazyLoad）；

• wait：节流等待时间（毫秒），此处为 200ms，即函数每 200ms 最多执行一次；

• document.querySelectorAll ('img.lazy')：根据 CSS 选择器获取所有带 lazy 类的待加载图片，返回 NodeList 集合。

• window.innerHeight：获取当前浏览器视口的高度，用于判断图片是否进入视口。

• Element.classList.contains ('lazy')：布尔值，判断图片元素是否包含 lazy 类，跳过已加载的图片。

• Element.getBoundingClientRect ()：获取元素相对于视口的位置信息（返回 DOMRect 对象），包含 top（元素顶部距视口顶部距离）、bottom（元素底部距视口顶部距离）等属性。

• img.removeAttribute ('data-src')：移除图片的 data-src 属性，避免重复读取。

• Element.classList.remove ('lazy')：移除图片的 lazy 类，标记为已加载。

• Element.classList.add ('loaded')：为图片添加 loaded 类，实现加载后的样式过渡。

• document.addEventListener ('scroll', throttledLazyLoad)：监听页面滚动事件，触发节流后的懒加载函数。

• window.addEventListener ('resize', throttledLazyLoad)：监听窗口大小变化事件，重新判断图片位置，适配视口尺寸变化。

• document.addEventListener ('DOMContentLoaded', lazyLoad)：监听 DOM 加载完成事件，初始化执行懒加载函数，检查首屏图片是否需要加载。

2. 现代方案：IntersectionObserver（推荐）🌟

为了解决传统方案的痛点，浏览器原生提供了IntersectionObserver API（交集观察器），专门用于监听 “元素是否进入视口 / 与其他元素产生交集”，是目前懒加载的最优解。

2.1 核心思路

① 浏览器原生支持：无需手动监听scroll、resize等事件，由浏览器底层优化执行逻辑；

② 交集监听：创建IntersectionObserver实例，指定观察的目标元素（lazy图片）；

③ 自动判断：当目标元素与视口产生交集（满足阈值条件）时，触发回调函数；

④ 加载图片：在回调中替换data-src到src，移除lazy类，停止观察该元素（避免重复触发）；

⑤ 降级处理：若浏览器不支持该 API，直接加载所有图片，保证功能可用

2.2 代码

javascript

document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll("img.lazy"); // 获取所有待加载图片


    // 检查浏览器是否支持IntersectionObserver
    if ("IntersectionObserver" in window) {
        // 创建交集观察器实例
        const imageObserver = new IntersectionObserver(function(entries, observer) {
            // 遍历所有被观察的元素的交集状态
            entries.forEach(function(entry) {
                // entry.isIntersecting：元素是否进入视口（产生交集）
                if (entry.isIntersecting) {
                    const img = entry.target; // 获取当前触发的图片元素
                    console.log('Loading image via IntersectionObserver:', img.dataset.src);
                    img.src = img.dataset.src; // 替换src，加载真实图片
                    img.classList.remove("lazy"); // 标记为已加载
                    img.classList.add("loaded"); // 添加样式过渡类
                    observer.unobserve(img); // 停止观察该图片，避免重复触发
                }
            });
        }, {
            root: null, // 观察的根元素：null表示视口
            rootMargin: "0px", // 根元素的边距，扩展/缩小观察区域
            threshold: 0.1 // 阈值：图片10%可见时触发回调
        });


        // 遍历所有lazy图片，开始观察
        lazyImages.forEach(function(image) {
            imageObserver.observe(image);
        });
    } else {
        // 降级处理：不支持时直接加载所有图片
        console.log("IntersectionObserver not supported, loading all images.");
        lazyImages.forEach(function(img) {
            img.src = img.dataset.src;
            img.classList.remove("lazy");
            img.classList.add("loaded");
        });
    }
});

2.3 代码实现效果

观察界面滚动图片变化与控制台打印：

 

2.4 该方案的优势

✅ 无性能损耗：浏览器底层实现，无需手动节流 / 防抖，性能远超scroll监听；

✅ 代码简洁：无需手动计算元素位置，逻辑清晰，维护成本低；

✅ 适配性强：完美兼容移动端、嵌套滚动等复杂布局；

✅ 可扩展：支持自定义观察规则（如rootMargin扩展观察区域、threshold调整触发阈值）。

2.5 关键 API 解析

IntersectionObserver(callback, options)：构造函数，创建交集观察器实例。

callback：交集状态变化时的回调函数，接收两个参数：

• entries：数组，每个元素是IntersectionObserverEntry对象，包含元素的交集状态、位置等信息；

• observer：当前的IntersectionObserver实例。

options：配置项（可选）：

• root：观察的根元素，默认null（视口）；

• rootMargin：根元素的边距，格式同 CSS margin（如 "100px 0"），可扩展 / 缩小观察区域；

• threshold：触发回调的阈值（0~1），0 表示元素刚进入视口就触发，1 表示元素完全进入视口才触发

• entry.isIntersecting：布尔值，判断元素是否与根元素产生交集（进入视口）。

• observer.observe(target)：开始观察指定的目标元素。

• observer.unobserve(target)：停止观察指定的目标元素。

五、CSS 与 HTML 代码

CSS：

<style>
        /* 页面基础样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            text-align: center;
        }


        /* 
         * 空白间隔区样式
         * 用于撑开页面高度，模拟长页面滚动效果
         */
        .spacer {
            height: 150vh;
            /* 核心：高度设置为 1.5 倍视口高度 (150vh) */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            /* 内容从顶部开始排列 */
            padding-top: 50vh;
            /* 核心：提示词距离顶部 1/3 (50vh / 150vh ≈ 0.33) */
            box-sizing: border-box;
            background-color: #f9f9f9;
            border-bottom: 1px solid #ddd;
        }


        /* 图片容器样式 */
        .image-wrapper {
            padding: 50px 0;
            background-color: #fff;
            min-height: 400px;
            /* 最小高度，防止图片加载前高度塌陷 */
            display: flex;
            align-items: center;
            justify-content: center;
        }


        /* 
         * 懒加载图片样式
         * .lazy 类表示图片尚未加载
         */
        img.lazy {
            max-width: 80%;
            height: auto;
            display: block;
            margin: 0 auto;
            opacity: 0.3;
            /* 初始低透明度，显示占位效果 */
            transition: opacity 0.5s;
            /* 添加过渡效果，使加载更平滑 */
        }


        /* 
         * 图片加载完成后的样式
         * .loaded 类在 JS 中加载完成后添加
         */
        img.loaded {
            opacity: 1;
            /* 恢复完全不透明 */
        }


        h1,
        h2 {
            color: #333;
        }
    </style>

HTML

代码高亮：javascripthtmlcsscsharpsqlnginxbash

<body>

    <!-- 

      第一部分：首屏空白区

      作用：展示标题和提示，迫使用户向下滚动

    -->

    <div class="spacer">

        <h1>传统懒加载方案</h1>

        <h2>⬇️ 向下滑动加载第一张图片 ⬇️</h2>

    </div>

    <!-- 

      第二部分：第一张图片

      data-src 存储真实图片地址，src 存储占位图

    -->

    <div class="image-wrapper">

        <img class="lazy"

            src="https://img10.360buyimg.com/wq/jfs/t24601/190/890984006/4559/731564fc/5b7f9b7bN3ccd29ab.png"

            data-src="https://img.36krcdn.com/hsossms/20260119/v2_53cad3f2226f48e2afc1942de3ab74e4@5888275@ai_oswg1141728oswg1053oswg495_img_png~tplv-1marlgjv7f-ai-v3:960:400:960:400:q70.jpg?x-oss-process=image/format,webp"

            alt="Image 1">

    </div>

    <!-- 

      第三部分：中间间隔区

      作用：分隔两张图片，确保加载第二张图片需要继续大幅滚动

    -->

    <div class="spacer">

        <h2>⬇️ 向下滑动出现第二张图片 ⬇️</h2>

    </div>

    <!-- 第四部分：第二张图片 -->

    <div class="image-wrapper">

        <img class="lazy"

            src="https://img10.360buyimg.com/wq/jfs/t24601/190/890984006/4559/731564fc/5b7f9b7bN3ccd29ab.png"

            data-src="https://img.36krcdn.com/hsossms/20260117/v2_1e74add07bb94971845c777e0ce87a49@000000@ai_oswg421938oswg1536oswg722_img_000~tplv-1marlgjv7f-ai-v3:960:400:960:400:q70.jpg?x-oss-process=image/format,webp"

            alt="Image 2">

    </div>

    <!-- 底部留白，确保能滚到底部，方便观察最后一张图的加载 -->

    <div style="height: 50vh; background-color: #f9f9f9;"></div>

</body>

​

疑问：

1. 图片懒加载的核心原理是什么？

答：核心是 “按需加载”，将非首屏图片的真实地址存到data-src（自定义属性），src指向占位图；通过监听滚动（传统）或IntersectionObserver（现代）判断图片是否进入视口，进入后将data-src赋值给src，触发真实图片加载。

2. 传统懒加载方案中，为什么要使用节流函数？

答：scroll事件会在滚动过程中高频触发（每秒数十次），若直接执行懒加载逻辑，会导致大量 DOM 操作和计算，引发页面卡顿；节流函数能控制函数在指定时间内只执行一次，减少性能损耗。

3. IntersectionObserver 相比传统 scroll 方案有哪些优势？

答：① 性能更好：浏览器底层优化，无需手动节流；② 代码更简洁：无需手动计算元素位置；③ 适配性强：兼容复杂布局；④ 可扩展：支持自定义观察规则。

4. 如何判断一个元素是否进入视口？

答：传统方案用element.getBoundingClientRect()获取元素的位置信息，判断rect.top < window.innerHeight && rect.bottom > 0；现代方案直接通过IntersectionObserver的isIntersecting属性判断。

5. 懒加载的降级方案是什么？

答：若浏览器不支持IntersectionObserver（如部分老旧浏览器），直接遍历所有lazy图片，将data-src赋值给src，保证图片能正常加载。

七、结语🎯

图片懒加载作为前端性能优化的 “基础操作”，其核心始终是 “按需加载”—— 优先保证首屏体验，减少无效资源消耗。传统的scroll+节流方案兼容旧浏览器，但存在性能和适配痛点；而IntersectionObserver作为现代方案，凭借浏览器原生优化、简洁的代码逻辑，成为当前懒加载的首选。

在实际开发中，我们需要根据项目的兼容需求选择方案：若需兼容老旧浏览器，可采用 “IntersectionObserver+scroll 降级” 的混合方案；若面向现代浏览器，直接使用IntersectionObserver即可。

性能优化没有银弹，但图片懒加载是列表类页面（电商、资讯、社交）的 “必做优化”，小小的改动就能显著提升页面加载速度和用户体验。希望这篇文章能帮你彻底吃透图片懒加载，无论是面试还是实战，都能游刃有余！

参考文章：原文链接​