懒加载那些事儿：图片也有“拖延症”？

你是否曾经打开一个图片满天飞的网站，结果页面加载速度堪比蜗牛？别急，今天我们就来聊聊如何用图片懒加载让你的网页"轻盈如燕"，让用户体验直线上升！

一、什么是图片懒加载？

懒加载，顾名思义，就是"懒惰地加载"。它的核心思想是：图片不在页面初始加载时全部加载，而是等用户真的要看（滚动到可视区域）时再加载。 这样可以大幅减少首屏加载压力，提升页面响应速度。

想象一下，你点开朋友圈，结果所有图片都在你还没滑动时就开始加载，手机瞬间卡成幻灯片。懒加载就是让这些图片"按需上菜"，你滑到哪儿，图片才出现。

二、为什么要用懒加载？

提升页面性能：减少首屏资源加载，页面秒开不是梦。
节省流量：用户不看的图片就不加载，省下流量买奶茶。
优化用户体验：图片逐步加载，页面不卡顿，用户心情美美哒。

三、懒加载的实现原理

1. 滚动监听法（传统方案）

核心思路：监听滚动事件，每次滚动时判断哪些图片进入了可视区域，然后再加载。

代码拆解

javascript 复制代码

function lazyLoad() {
    const imgs = document.querySelectorAll('img[data-origin][lazyload]')
    imgs.forEach(item => {
        const rect = item.getBoundingClientRect();
        if (rect.top < viewport && rect.bottom > 0) {
            const url = item.dataset.origin
            item.src = url
            item.removeAttribute('lazyload')
        }
    })
}
lazyLoad()
window.addEventListener('scroll', throttle(lazyLoad, 200))

getBoundingClientRect()：获取图片相对于视口的位置。
rect.top < viewport && rect.bottom > 0：判断图片是否进入可视区域。
item.src = url：将真正的图片地址赋值给 src，图片开始加载。
throttle：节流函数，防止滚动事件触发太频繁，页面卡顿。

优缺点

优点：兼容性好，所有主流浏览器都支持。
缺点：滚动事件频繁触发，性能有压力；代码维护略繁琐。

具体效果

2. IntersectionObserver（现代方案）

核心思路：用浏览器原生 API 监听图片是否进入可视区域，自动触发加载。

代码拆解

javascript 复制代码

const io = new IntersectionObserver((entries) => {
    entries.forEach(item => {
        if (item.isIntersecting) {
            const img = item.target
            img.src = img.dataset.origin
            io.unobserve(img)
            img.removeAttribute('lazyload')
        }
    })
})
document.querySelectorAll('img[lazyload][data-origin]').forEach(item => {
    io.observe(item)
})

IntersectionObserver：浏览器提供的"可视区域侦查员"，自动帮你盯着图片。
isIntersecting：判断图片是否进入视口。
io.unobserve(img)：加载后取消监听，节省资源。

优缺点

优点：性能高效，代码简洁优雅，浏览器自动优化。
缺点：部分老旧浏览器不支持（IE：我是谁？我在哪？）。

具体效果

四、懒加载的完整实现流程

1. HTML结构设计

html 复制代码

<img lazyload="true" data-origin="图片真实地址" alt="">

lazyload 属性：标记需要懒加载的图片。
data-origin：存储真实图片地址，初始 src 可以为空或占位图。

2. 样式优化

css 复制代码

img {
    display: block;
    height: 500px;
}

保证图片有固定高度，避免页面跳动。

3. JavaScript实现

滚动监听法

获取所有待加载图片
判断是否进入可视区域
加载图片并移除 lazyload 标记
监听滚动事件并节流

IntersectionObserver法

创建观察者实例
监听所有待加载图片
图片进入视口自动加载
加载后取消监听

五、懒加载的进阶优化

1. 占位图方案

初始 src 设置为一张低分辨率占位图，等图片加载完再替换。

2. 动画渐变效果

图片加载完成后加个淡入动画，用户体验更丝滑。

3. 响应式图片

结合 srcset 和 sizes，让不同设备加载不同尺寸图片，节省流量。

4. 服务端渲染（SSR）配合懒加载

SSR 首屏只渲染必要图片，其他图片懒加载，SEO 和性能双赢。

六、常见问题与踩坑指南

图片未加载？ 检查 data-origin 是否正确，lazyload 属性是否加上。
页面闪烁？ 图片高度要提前设置好。
滚动监听卡顿？ 节流函数必不可少。
IntersectionObserver不兼容？ 可以降级用滚动监听法。

七、实战场景

电商网站商品列表
社交平台图片流
新闻门户首页大图
技术博客配图

八、幽默总结

懒加载就像你家猫，只有你靠近猫粮盆时才会"加载"出来，平时都在角落里省电模式。用好懒加载，网页就能像猫一样灵动，用户体验也能像撸猫一样治愈！

还在等什么？赶紧把你的图片懒加载起来，让你的页面飞起来吧！🚀🚀🚀

九、完整代码参考

滚动监听法

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片懒加载</title>
    <style>
        img {
            display: block;
            height: 500px;
        }
    </style>
</head>
<body>
    <!-- 多张图片省略 -->
    <script>
        // ...完整JS见上文
    </script>
</body>
</html>

IntersectionObserver法

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片懒加载</title>
    <style>
        img {
            height: 500px;
            display: block;
        }
    </style>
</head>
<body>
    <!-- 多张图片省略 -->
    <script>
        // ...完整JS见上文
    </script>
</body>
</html>

十、参考与延伸阅读

MDN: IntersectionObserver

最后，祝你写代码不再"卡顿"，懒加载让你的网站如虎添翼！😎