HTML5图片懒加载技巧与实现方法

HTML5图片懒加载远不止给img标签加个loading="lazy"属性那么简单——它是一套需兼顾兼容性、性能与服务端协同的精细工程：原生属性虽简洁，却受限于浏览器支持和语义陷阱；IntersectionObserver提供了可靠可控的替代方案，但rootMargin和threshold的微调直接决定用户是否遭遇白屏或抖动；而盲目依赖scroll事件则极易引发布局重排和滚动卡顿；更关键的是，真正的优化必须延伸至服务端——通过Client-Hints传递设备信息、动态响应图像格式与分辨率请求，才能让“懒加载”真正转化为“智加载”。做好它，不是推迟请求，而是让每张图在正确的时间、以正确的形态，恰好抵达用户眼前。

用 loading="lazy" 属性最简单，但兼容性和语义有坑

现代浏览器（Chrome 76+、Firefox 75+、Safari 15.4+）原生支持 loading="lazy"，只需给 加上这个属性即可触发懒加载：

<img src="photo.jpg" loading="lazy" alt="风景">

但它只对 和