动态插入的需手动触发懒加载：设data-src而非src，用IntersectionObserver监听并替换src，及时unobserve，框架中注意节点生命周期，loading="lazy"不可单独依赖。
img元素插入后如何触发懒加载
动态插入的 loading="lazy"。这是因为该属性只在元素首次被 HTML 解析器处理时生效，JS 动态创建的元素需要手动“唤醒”或依赖 IntersectionObserver 主动监听。
实操建议：
- 对 JS 创建的
IntersectionObserver实例的observe()方法，不能只靠属性 - 若使用第三方库（如 lazysizes），需在插入 DOM 后调用
lazySizes.init()或触发lazyload:done事件 - 避免在
document.createElement('img')后直接设src——这会立刻发起请求，应先设data-src，等进入视口再赋值给src
IntersectionObserver 回调中替换 src 的安全写法
在 IntersectionObserver 的回调里直接改 img.src 是常见做法，但容易漏掉重复触发、错误状态、或已销毁节点的问题。
实操建议：
- 每次回调开头加
if (!entry.isIntersecting || !img.parentNode) return，防止离开视口后仍执行 - 用
img.dataset.src存原始地址，替换前先检查是否存在且非空 - 替换后立即调用
observer.unobserve(img)，避免后续重复监听（除非需支持“滚出再滚入重载”） - 为防图片加载失败，可加
img.onerror = () => { img.src = fallbackUrl }
Vue/React 等框架中动态图片的懒加载陷阱
框架的响应式更新机制会让 src 变更时机与 DOM 渲染节奏不一致，导致 IntersectionObserver 提前监听未挂载节点，或监听了已被销毁的旧节点。
实操建议：
- Vue 中用
v-if控制图片渲染时，应在mounted钩子或onMounted里调用observe()；用v-show则可在创建后立即 observe，但要确保父容器有高度 - React 中避免在
useEffect里无清理地 observe，必须返回 cleanup 函数调用unobserve() - 不要把
IntersectionObserver实例放在组件内反复新建——应复用单例，否则内存泄漏风险高 - SSR 场景下，服务端不执行 JS，
loading="lazy"会被保留，但动态逻辑需在客户端 hydration 后重新激活
兼容性与降级：loading="lazy" 能否当兜底
loading="lazy" 在 Chrome 76+、Firefox 75+、Edge 79+ 支持，但 Safari 直到 15.4 才支持动态插入元素的懒加载，且 iOS Safari 一直存在 bug：滚动极快时可能跳过加载。
实操建议：
- 不能把
loading="lazy"当作唯一方案，尤其面向移动端用户时，必须搭配IntersectionObserver实现 - 可检测支持性：
'loading' in HTMLImageElement.prototype，但该检测仅表示属性存在，不保证行为可靠 - 降级时，可对不支持的环境直接设
src，或用低配版 scroll 事件监听（性能差，仅作保底） - 注意：Safari 对
loading="lazy"+srcset组合的支持不稳定，建议优先用data-srcset手动解析
最常被忽略的是 observer 实例的生命周期管理——它不像事件监听器那样能靠 once 自动清理，一旦忘记 unobserve 或没做节点有效性判断，就会持续持有 DOM 引用，导致内存无法回收，尤其在长列表滚动场景下问题明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
