HTML5图片懒加载优化方法

本文深入解析了HTML5图片懒加载的最佳实践，强调原生`loading="lazy"`作为轻量、高效、零依赖的首选方案，覆盖主流现代浏览器且不阻塞渲染；同时指出JS方案（如IntersectionObserver）仅在需兼容旧版浏览器或实现高级交互（如渐入动画、非图片资源懒加载）时才必要，并详解了`rootMargin`和`threshold`的关键配置技巧；针对懒加载常见的闪烁与布局抖动问题，提出通过HTML `width`/`height`属性与CSS `aspect-ratio`预留空间的根本解法；最后点明懒加载只是“时机控制”，真正提升加载体验离不开WebP压缩与CDN缓存的协同优化——三者结合，才能让图片又快又稳地出现在用户眼前。

图片懒加载该用 loading="lazy" 还是 JS 实现？

原生 loading="lazy" 是当前最轻量、兼容性足够好的首选方案。Chrome 76+、Firefox 75+、Safari 15.4+ 均已支持，且无需额外 JS，不阻塞渲染，也不增加 bundle 体积。

JS 懒加载（如 IntersectionObserver）仅在需兼容老浏览器、或要配合自定义占位、渐入动画、或触发非图片资源（如 iframe、视频）时才必要。

• loading="lazy" 对 和