图片懒加载的核心是按需加载，即图片进入视口时才通过data-src属性由JavaScript赋值给src发起请求，避免初始加载阻塞；现代实现推荐使用IntersectionObserver监听，配合dataset.src读取并设置真实地址，同时注意命名规范、路径有效性及布局稳定性。
图片懒加载的核心是“按需加载”，即当图片进入视口（viewport）时才发起请求，避免页面初始加载大量图片拖慢性能。data- 属性（如 data-src）正是实现这一机制的关键载体——它让图片的真正地址暂不写在 src 中，而是先存于自定义属性里，由 JavaScript 控制何时读取并赋值。
为什么用 data-src 而不是直接写 src
浏览器在解析 HTML 时，只要遇到 src，不仅浪费带宽，还会阻塞主线程、拉长 LCP（最大内容绘制）时间。
用 data-src 可以“骗过”浏览器：HTML 里写成
此时浏览器不会加载图片，直到 JS 主动读取 data-src 并赋给 src。
基础懒加载实现（原生 JS + Intersection Observer）
现代推荐用 IntersectionObserver 监听元素是否进入视口，比频繁监听 scroll 更高效、更精准。
立即学习“Java免费学习笔记（深入）”；
给所有待懒加载图片加 class="lazy" 和 data-src 属性 创建观察器，监听这些图片是否出现在视口内 一旦触发，把 dataset.src 赋给 img.src，再移除 lazy 类防止重复加载 可选：加载失败时显示占位图或错误提示
示例代码：
const lazyImages = document.querySelectorAll(‘img.lazy’);
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove(‘lazy’);
observer.unobserve(img); // 停止观察已加载的图片
}
});
});
lazyImages.forEach(img => observer.observe(img));
dataset 的使用细节和注意事项
img.dataset.src 等价于 img.getAttribute('data-src')，但更简洁。注意以下几点：
HTML 中写 data-src，JS 中访问用 dataset.src（驼峰命名：连字符后字母大写，如 data-src-set → dataset.srcSet） 确保 data-src 是有效 URL，相对路径需相对于当前页面，不是相对于 JS 文件 建议同时设置 width/height 或使用 aspect-ratio 防止布局偏移（CLS） 若需响应式图片，可用 data-srcset + data-sizes，加载时再同步赋值给 srcset 和 sizes
兼容性兜底与增强体验
对于不支持 IntersectionObserver 的老浏览器（如 IE），可降级为 scroll + getBoundingClientRect 判断；但更推荐用 官方 polyfill。
增强体验方面：
加载中显示骨架屏或模糊占位图（通过 data-src-placeholder） 图片加载完成后再淡入（监听 load 事件，加 CSS transition） 对即将进入视口的图片预加载（设置 rootMargin 扩大观察区域，如 '100px'）
基本上就这些。用好 data- 属性 + IntersectionObserver，就能写出轻量、可靠、符合现代 Web 性能规范的懒加载逻辑。
以上就是JavaScript中如何实现图片懒加载_data属性使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543013.html
微信扫一扫 
支付宝扫一扫 
