JavaScript 如何做图片懒加载

打开手机刷短视频时，你不会看到页面最底部的画面，就自动加载出来占内存，这就是“懒加载”。它的核心逻辑是：把不需要立刻显示的内容“延迟加载”，只在需要时才加载，能帮手机省流量、让网页加载更快。

为什么图片需要懒加载？

一张普通的高清图片，可能占几MB内存，要是网页有几十张图片，刚打开就得加载上百MB，不仅费流量，老手机还会卡顿。就像你去食堂吃饭，不会把一整盘菜先端到面前占位置，而是等筷子伸过去再夹，懒加载就是这个道理——等图片要出现在屏幕上了，才去“夹”它。

用JavaScript做图片懒加载，分3步走

不用写复杂代码，靠JS就能实现，跟着3个简单步骤做就行：

第一步：给图片做“加载准备”

先把普通图片的src属性，换成自定义的属性，比如data-src，告诉浏览器“这个图片先别加载，存一下地址就行”。比如：

再加个占位图，比如灰色的小方块当背景，哪怕图片没加载，页面也不会空一块，看着更舒服。

第二步：判断“图片该加载了”

得知道图片什么时候要露出，用JS监听页面滚动——用户往上划，浏览器就会检查：每个没加载的图片，是不是到了屏幕可视区域里？

举个例子：你在看手机中间的内容，这时候底部的图片还在屏幕下方，就不用加载；等你划到快看到它了，就触发加载。

第三步：触发加载动作

一旦图片进入可视区域，就把data-src里存的地址，放回src属性，浏览器就会自动加载这张图了。

要是嫌监听滚动麻烦，现在还有更简单的IntersectionObserver接口，不用自己算滚动距离，JS会自动帮你判断图片是否可见，写代码更省事儿。

避坑小提醒

做懒加载时别踩两个小坑：

第一，别给首屏的图片用懒加载——首屏是用户一打开就会看到的，要是延迟加载，用户会看到空白，反而影响体验；

第二，占位图别选太大的——占位图本身也会加载，选1KB以内的小图就行，别让它占流量。

这样做出来的懒加载，既能让网页打开更快，又能帮用户省流量，是前端优化的小妙招，很多常用的网站都在这么用。