JavaScript中如何实现图片懒加载_data属性使用

图片懒加载的核心是按需加载，即图片进入视口时才通过data-src属性由JavaScript赋值给src发起请求，避免初始加载阻塞；现代实现推荐使用IntersectionObserver监听，配合dataset.src读取并设置真实地址，同时注意命名规范、路径有效性及布局稳定性。

图片懒加载的核心是“按需加载”，即当图片进入视口（viewport）时才发起请求，避免页面初始加载大量图片拖慢性能。data- 属性（如 data-src）正是实现这一机制的关键载体——它让图片的真正地址暂不写在 src 中，而是先存于自定义属性里，由 JavaScript 控制何时读取并赋值。

为什么用 data-src 而不是直接写 src

浏览器在解析 HTML 时，只要遇到 <img src="xxx" alt="JavaScript中如何实现图片懒加载_data属性使用" > 就会立即发起网络请求。如果页面有几十张首屏外的图片，全写死 src，不仅浪费带宽，还会阻塞主线程、拉长 LCP（最大内容绘制）时间。
用 data-src 可以“骗过”浏览器：HTML 里写成

此时浏览器不会加载图片，直到 JS 主动读取 data-src 并赋给 src。

基础懒加载实现（原生 JS + Intersection Observer）

现代推荐用 IntersectionObserver 监听元素是否进入视口，比频繁监听 scroll 更高效、更精准。

立即学习“Java免费学习笔记（深入）”；

标签： css javascript java html js 浏览器 懒加载 ssl 为什么