懒加载是按需触发资源请求，非渲染完统一加载；loading="lazy"有兼容性差、无法监听状态等缺陷，推荐用intersectionobserver实现，需注意保存引用、设置rootmargin、加载后取消观察及错误处理。
什么是懒加载，为什么不能只靠 loading="lazy"
懒加载本质是「按需触发资源请求」，不是等页面渲染完再统一加载。现代浏览器的 loading="lazy" 对 <img> 和 <iframe></iframe> 有原生支持，但存在明显限制：不兼容 IE 和旧版 Safari，无法监听加载状态、失败重试、自定义占位逻辑，且对背景图、Canvas 图片、第三方组件内图片完全无效。面试中手写懒加载，考的就是你能否绕过这些限制，用 Intersection Observer 或滚动事件兜底。
用 IntersectionObserver 实现基础懒加载
这是当前最推荐的方式，性能好、代码简洁、可读性强。核心逻辑是监听目标元素是否进入视口，一旦进入，就替换 data-src 到 src 并触发加载。
常见错误现象：IntersectionObserver 实例未保存引用导致被 GC；回调中直接赋值 img.src 但没处理加载失败；忽略 rootMargin 导致图片快进快出时加载不及时。
实操建议：
- 创建 Observer 时设置
rootMargin: "50px"，提前 50px 触发加载，避免滚动过快时白屏 - 每个
<img>只观察一次，加载完成后调用observer.unobserve(img) - 务必监听
img.onerror，失败时可 fallback 到默认占位图或重试逻辑 - 不要在回调里直接操作 DOM 样式（如加 loading 动画），优先用 CSS class 控制，避免强制同步布局
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);
}
});
}, { rootMargin: '50px' });
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
滚动事件 fallback 方案怎么写才不卡顿
当需要兼容 IE11 或某些低版本安卓 WebView 时，必须降级到 scroll + getBoundingClientRect()。但直接绑定 scroll 会高频触发，造成严重卡顿。
关键点在于节流和缓存计算结果：
- 用
requestIdleCallback或setTimeout(..., 0)做简单节流，比 Lodash 的throttle更轻量 - 把所有待检测的
<img>元素缓存在数组里，每次只遍历这个数组，而不是反复querySelectorAll - 判断是否进入视口时，用
rect.top 0，比rect.top = 0更准确（避免刚贴顶时误判） - 加载完成后从缓存数组中
splice掉该元素，减少后续遍历开销
如何处理背景图、<picture></picture> 和 React/Vue 组件内的懒加载
原生 loading="lazy" 对 background-image 完全无效；<picture></picture> 的 <source></source> 也不支持 data-srcset 这类属性；框架组件里图片可能还没挂载完成，DOM 就查不到。
实操建议：
- 背景图懒加载：给容器加
data-bg，用 JS 设置element.style.backgroundImage = `url(${url})`，注意 URL 要加引号 -
<picture></picture>：为每个<source></source>添加data-srcset，加载时遍历其父<picture></picture>下所有<source></source>和<img>，分别赋值srcset和src - React/Vue 场景：不要在
useEffect或mounted里一次性 observe 所有图片，改用自定义 Hook 或指令，在元素挂载后立即 observe，确保 DOM 存在
最容易被忽略的是：懒加载逻辑如果放在全局 script 里，而图片 DOM 是异步渲染（比如分页加载、Tab 切换），就必须提供手动触发 observe 的入口函数，否则新插入的图片永远不会被监听。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
