如何在JavaScript中实现懒加载？

懒加载是前端性能优化的重要手段，核心目标是延迟非必要资源的加载时机，避免页面初始加载时请求过多资源导致加载缓慢。对于包含大量图片或长列表的页面，懒加载能显著提升首屏加载速度，减少不必要的带宽消耗。

懒加载的实现思路

懒加载的基本逻辑是：初始时只加载可视区域内的资源，对于不在可视区域的资源，先不发起请求，等到页面滚动、资源进入可视区域时再触发加载。传统实现依赖滚动事件监听，通过计算元素位置和视口位置判断是否需要加载；现代实现则可以使用Intersection_Observer API，更简洁高效地完成判断。

方式一：基于滚动事件实现懒加载

这种方式需要监听页面的scroll事件，每次滚动时遍历所有待加载的资源元素，判断元素是否进入可视区域。为了避免滚动事件触发过于频繁导致性能问题，通常会搭配节流函数使用。

实现步骤

• 给待懒加载的元素添加自定义属性，比如data-src，用来存储真实的资源地址，初始时src属性为空或者放占位图。
• 监听scroll事件，触发时执行加载判断逻辑。
• 判断元素是否进入可视区域：元素顶部距离页面顶部的距离小于视口高度加上页面滚动距离，且元素底部距离页面顶部的距离大于页面滚动距离，就说明元素在可视区域内。
• 元素进入可视区域后，把data-src的值赋给src属性，触发资源加载，同时移除该元素的待加载标记，避免重复判断。

代码示例

// 节流函数，避免滚动事件频繁触发
function throttle(fn, delay) {
    let timer = null;
    return function(...args) {
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, args);
                timer = null;
            }, delay);
        }
    };
}

// 加载懒加载元素
function loadLazyElements() {
    // 获取所有带data-src属性的待加载图片
    const lazyElements = document.querySelectorAll('img[data-src]');
    // 如果没有待加载元素，移除滚动监听
    if (lazyElements.length === 0) {
        window.removeEventListener('scroll', handleScroll);
        return;
    }
    // 获取视口高度和页面滚动距离
    const viewHeight = window.innerHeight;
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    lazyElements.forEach(img => {
        // 获取元素距离页面顶部的距离
        const imgTop = img.getBoundingClientRect().top + scrollTop;
        const imgBottom = imgTop + img.offsetHeight;
        // 判断元素是否进入可视区域
        if (imgBottom > scrollTop && imgTop < scrollTop + viewHeight) {
            // 把data-src的值赋给src，触发图片加载
            img.src = img.getAttribute('data-src');
            // 移除data-src属性，避免重复判断
            img.removeAttribute('data-src');
        }
    });
}

// 节流处理后的滚动监听函数
const handleScroll = throttle(loadLazyElements, 200);

// 初始加载一次，加载首屏的图片
loadLazyElements();
// 监听滚动事件
window.addEventListener('scroll', handleScroll);

方式二：使用Intersection Observer API实现懒加载

Intersection Observer API是浏览器提供的原生API，用来异步观察目标元素与祖先元素或视口的交叉状态，不需要手动监听滚动和计算位置，性能更好，代码也更简洁。

实现步骤

• 同样给待加载元素添加data-src自定义属性存储真实地址。
• 创建Intersection Observer实例，配置回调函数和观察选项。
• 遍历所有待加载元素，调用observer的observe方法开始观察元素。
• 在回调函数中，当元素进入可视区域（交叉比例大于0）时，给元素赋值真实地址，停止观察该元素。

代码示例

// 创建观察器实例
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        // 如果元素进入可视区域
        if (entry.isIntersecting) {
            const img = entry.target;
            // 赋值真实地址
            img.src = img.getAttribute('data-src');
            // 移除自定义属性
            img.removeAttribute('data-src');
            // 停止观察该元素
            observer.unobserve(img);
        }
    });
}, {
    // 交叉比例阈值，0表示刚进入视口就触发
    threshold: 0
});

// 获取所有待加载的图片
const lazyImages = document.querySelectorAll('img[data-src]');
// 开始观察每个图片元素
lazyImages.forEach(img => {
    observer.observe(img);
});

两种方式的对比

可以通过下面的表格对比两种实现方式的差异：

注意事项

• 初始时给待加载元素设置合适的占位样式，比如固定宽高或者背景色，避免页面布局跳动。
• 如果使用Intersection Observer API，需要做兼容性判断，不支持的浏览器可以降级为滚动事件监听的实现方式。
• 加载完成后及时移除待加载标记或停止观察，避免重复执行判断逻辑。

懒加载不仅适用于图片，也适用于其他需要延迟加载的内容，比如列表项、iframe等资源，实现思路是通用的，只需要把资源地址的赋值逻辑替换为对应资源的加载逻辑即可。

JavaScript懒加载Intersection_Observerimg元素性能优化修改时间：2026-05-29 02:53:12