现代浏览器原生支持 loading=”lazy”,比 js 插件更轻量可靠;它仅适用于 img 和 iframe,需配合 src 使用,不兼容 css 背景图等场景,老浏览器可降级用 intersectionobserver。
直接用 loading="lazy" 就够了,不需要 JS 插件。
为什么现在不推荐手写 JS 懒加载插件
现代浏览器(Chrome 76+、Firefox 75+、Edge 79+、Safari 15.4+)原生支持 loading="lazy",它由浏览器内核控制,比 JS 实现更轻量、更可靠、更省电——JS 插件反而可能因执行时机、滚动监听抖动、IntersectionObserver 兼容性等问题导致图片漏载或重复加载。
- JS 插件需手动引入、初始化,容易忘记加
data-src或漏调load() - 在低性能设备上,JS 滚动监听会抢占主线程,造成卡顿
- 部分插件对
srcset、picture元素支持不全,响应式图片失效 - 服务端渲染(SSR)场景下,JS 插件常因 DOM 未就绪而报错
Cannot read property 'querySelectorAll' of null
loading="lazy" 的正确写法和限制
它只对 <img alt="HTML5调用JS插件实现懒加载图片_新手入门实用调用法【教程】" > 和 <iframe></iframe> 生效,且仅在非首屏、垂直方向滚动时触发。必须配合 src 使用(不能只写 data-src),否则图片不会显示。