懒加载是“用到再加载”的网页性能优化技术，核心是图片进入可视区时才加载；推荐用Intersection Observer API实现，兼容方案可用节流的scroll+getBoundingClientRect；需避免影响首屏关键图并处理加载失败。
懒加载是一种优化网页性能的技术，核心思想是“用到再加载”——图片或其他资源在进入可视区域时才开始请求和渲染，而不是页面一打开就全部加载。这样能减少初始请求量、节省带宽、加快首屏渲染速度，尤其对长列表或含大量图片的页面效果明显。
图片懒加载的关键原理
判断图片是否即将进入用户视野，主要依赖浏览器提供的 Intersection Observer API（推荐）或监听 scroll/resize 事件 + getBoundingClientRect() 计算位置。现代方案优先用 Intersection Observer，它性能更好、写法更简洁，且原生支持监听页面内元素与视口的交叉状态。
用 Intersection Observer 实现懒加载（推荐）
步骤很简单：给图片的 src 暂存到自定义属性（如 data-src），初始用占位图或空白；用 Intersection Observer 监听图片元素，一旦进入视口，就把 data-src 的值赋给 src，触发加载。
- HTML 中标记懒加载图片：
- JS 初始化观察器，设置阈值（比如提前 100px 开始加载）：
const io = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.classList.remove('lazy'); io.unobserve(img); } }); }, { threshold: 0.01, rootMargin: '100px' }); - 遍历所有
.lazy图片并开始观察：document.querySelectorAll('.lazy').forEach(img => io.observe(img));
兼容旧浏览器的降级方案（scroll + getBoundingClientRect）
如果需支持 IE 或老版本安卓浏览器，可用滚动监听配合位置计算。但要注意节流（如用 requestAnimationFrame 或 setTimeout 防抖），否则频繁触发影响性能。
Modoer 是一款以本地分享，多功能的点评网站管理系统。采用 PHP+MYSQL 开发设计，开放全部源代码。因具有非凡的访问速度和卓越的负载能力而深受国内外朋友的喜爱，不局限于商铺类点评，真正实现了多类型的点评，可以让您的网站点评任何事与物，同时增加产品模块，也更好的网站产品在网站上展示。Modoer点评系统 2.5 Build 20110710更新列表1.同步 旗舰版系统框架2.增加 限制图片
立即学习“Java免费学习笔记（深入）”；
- 获取图片相对于视口的顶部距离：
const rect = img.getBoundingClientRect(); const isInView = rect.top 0; - 滚动时批量检查可见图片，只对符合条件的加载，并移除监听或标记已处理
- 记得在图片加载成功后绑定
onload，失败时可 fallback 到占位图或错误提示
额外优化建议
懒加载不是万能的，搭配其他手段效果更佳：
- 使用
loading="lazy"属性（原生懒加载）：现代浏览器已支持， - 结合
srcset和sizes做响应式图片，让不同设备加载合适尺寸 - 为懒加载图片添加简单 CSS 过渡（如淡入），提升视觉体验：
img { opacity: 0; transition: opacity 0.3s; } img.loaded { opacity: 1; } - 避免对关键首屏图片使用懒加载（比如 banner 图），否则可能影响 LCP 等核心指标
基本上就这些。懒加载不复杂但容易忽略细节，比如未及时 unobserve、没处理加载失败、或在 SSR 场景下服务端未预留占位结构。理清时机、边界和容错，就能稳稳提效。
