图片懒加载测试器 - loading=lazy 效果对比

loading="lazy" 是HTML标准中的原生图片懒加载属性。当在 <img> 标签上设置此属性后，浏览器会延迟加载该图片，直到它即将进入视口（viewport）。这是一种无需JavaScript即可实现的性能优化技术，所有现代浏览器均已支持。

懒加载可以显著改善页面性能：

• 减少初始带宽消耗：仅加载用户能看到的图片
• 加快首屏渲染速度：减少关键资源竞争
• 降低服务器压力：按需请求资源
• 改善LCP指标（最大内容绘制）：让关键图片更快显示
• 节省用户流量：特别是移动端用户不会下载未浏览的内容

不同浏览器的预加载距离不同：

• Chrome/Edge：视口下方约 1250px-2500px（根据网络状况动态调整）
• Firefox：视口下方约 300px-600px
• Safari：视口下方约 500px-1000px

这意味着即使图片还未滚动到屏幕内，浏览器也可能提前开始加载。这平衡了用户体验和性能。

适合懒加载的图片：

• 首屏之外的图片（文章插图、图库等）
• 列表或瀑布流中的图片
• 用户生成内容中的图片
• 页脚或侧边栏的装饰性图片

不建议对首屏关键图片（如Hero图、LCP元素）使用懒加载，这反而会延迟关键内容的显示。

原生 loading="lazy"：

• 无需JavaScript，零额外代码
• 浏览器内置优化，预加载策略更智能
• 不依赖DOM操作或Intersection Observer
• 更小的性能开销

JS懒加载库（如lazysizes）提供更多控制选项，但增加了代码体积和复杂度。对于大多数场景，原生方案已足够优秀。

使用以下JavaScript检测：

'loading' in HTMLImageElement.prototype

如果返回 true，则浏览器支持原生懒加载。全球约96%+的浏览器已支持此特性（2024年数据）。对于不支持的旧浏览器，可以搭配polyfill使用。