实现懒加载图片的核心思路是：页面初始只加载视口内图片，滚动时动态加载其余图片。使用 Intersection Observer API 监听元素进入视口，将 data-src 赋值给 src 并停止观察，配合占位图与 CSS 过渡提升体验，通过 rootMargin 提前加载附近图片，兼容性好且性能高。
实现懒加载图片的核心思路是：页面初始加载时，只加载视口内或靠近视口的图片，其他图片在用户滚动到其附近时再动态加载。使用 Intersection Observer API 是现代浏览器推荐的做法，它性能好、兼容性强，无需依赖第三方库。
1. 基本HTML结构
图片使用占位符属性，真实图片地址存放在 data-src 中，避免页面加载时自动请求原图。
@@##@@
可以配合低质量占位图（LQIP）或纯色背景提升用户体验：
@@##@@
2. 使用 Intersection Observer 监听图片进入视口
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); });});
3. 添加简单CSS优化体验
设置过渡效果，让图片加载更自然：
img.lazy { opacity: 0.5; transition: opacity 0.3s ease-in-out;}img:not(.lazy) { opacity: 1;}
你也可以用背景模糊渐变等方式进一步美化加载过程。
4. 可选：提前加载靠近视口的图片
通过 rootMargin 扩展观察范围，让用户还没滚到时就开始加载。
const imageObserver = new IntersectionObserver((entries, observer) => { // ...同上}, { rootMargin: "50px" // 提前50px开始加载});
这个值可以根据实际布局调整，比如卡片流布局可设为 “100px”。
基本上就这些。Intersection Observer 实现懒加载简洁高效，不阻塞主线程，适合现代网页开发。注意老版本IE不支持，如需兼容可引入 polyfill。
以上就是如何用HTML插入懒加载图片_HTML Intersection Observer API实现的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1585744.html
微信扫一扫 
支付宝扫一扫 
