实现懒加载图片的核心思路是：页面初始只加载视口内图片，滚动时动态加载其余图片。使用 Intersection Observer API 监听元素进入视口，将 data-src 赋值给 src 并停止观察，配合占位图与 CSS 过渡提升体验，通过 rootMargin 提前加载附近图片，兼容性好且性能高。
实现懒加载图片的核心思路是：页面初始加载时，只加载视口内或靠近视口的图片，其他图片在用户滚动到其附近时再动态加载。使用 Intersection Observer API 是现代浏览器推荐的做法，它性能好、兼容性强，无需依赖第三方库。
图片使用占位符属性，真实图片地址存放在 data-src 中，避免页面加载时自动请求原图。
<img class="lazy" alt="示例图片" width="600" height="400">
可以配合低质量占位图（LQIP）或纯色背景提升用户体验：
<img class="lazy" src="data:image/svg+xml,%3Csvg viewBox='0 0 600 400' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='600' height='400' fill='%23ddd'/%3E%3C/svg%3E" alt="示例图片">
JavaScript 创建观察器，当图片元素接近视口时，将其 data-src 赋值给 src，并停止监听该元素。
立即学习“前端免费学习笔记（深入）”；
document.addEventListener("DOMContentLoaded", function() {
const lazyImages = document.querySelectorAll(".lazy");
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
if (img.dataset.src) {
img.src = img.dataset.src;
img.classList.remove("lazy");
observer.unobserve(img); // 加载后取消监听
}
}
});
});
lazyImages.forEach(img => {
imageObserver.observe(img);
});
});
设置过渡效果，让图片加载更自然：
img.lazy {
opacity: 0.5;
transition: opacity 0.3s ease-in-out;
}
img:not(.lazy) {
opacity: 1;
}
你也可以用背景模糊渐变等方式进一步美化加载过程。
通过 rootMargin 扩展观察范围，让用户还没滚到时就开始加载。
const imageObserver = new IntersectionObserver((entries, observer) => {
// ...同上
}, {
rootMargin: "50px" // 提前50px开始加载
});
这个值可以根据实际布局调整，比如卡片流布局可设为 "100px"。
基本上就这些。Intersection Observer 实现懒加载简洁高效，不阻塞主线程，适合现代网页开发。注意老版本IE不支持，如需兼容可引入 polyfill。以上就是如何用HTML插入懒加载图片_HTML Intersection Observer API实现的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
261
收藏
