如何实现懒加载_javascript中图片懒加载的原理是什么？

图片懒加载的核心是按需加载，即初始化时仅加载可视区图片，滚动至附近再加载其余图片，以减少首屏请求、提升渲染速度并节省带宽；关键依赖JavaScript检测元素是否进入视口，推荐使用Intersection Observer API，兼容方案为getBoundingClientRect或节流的scroll监听；实现上用data-src存真实地址、src设占位图，进入视口后替换并停止观察。

图片懒加载的核心是“按需加载”——页面初始化时只加载可视区域内的图片，其余图片等到用户滚动到附近再加载。这样能减少首屏请求、加快渲染速度、节省带宽。

懒加载的关键判断依据：元素是否进入视口

浏览器本身不自动识别“图片是否可见”，需要 JavaScript 主动检测。常用方法有：

• getBoundingClientRect()：获取图片元素相对于视口的坐标（top/bottom/left/right），判断其 top 是否小于视口高度、bottom 是否大于 0；
• Intersection Observer API（推荐）：原生异步监听元素与视口的交叉状态，性能好、写法简洁，无需频繁监听 scroll 事件；
• 手动监听 scroll + throttle：兼容老浏览器，但容易造成卡顿，需节流控制检测频率。

实现步骤：从占位到真实图片替换

懒加载不是“不加载”，而是延迟加载。通常做法是：

• HTML 中用 data-src 存真实图片地址，src 放占位图（如 1×1 透明 GIF 或 base64）；
• JS 检测到图片即将进入视口时，把 data-src 的值赋给 src；
• 可选：加载完成后添加 loaded 类或触发事件，便于加动画或埋点。

一个最小可用的 Intersection Observer 示例

不用第三方库，几行代码就能跑起来：

标签： javascript java html js seo 浏览器 懒加载 延迟加载