17370845950

优先使用原生loading="lazy"实现图片懒加载，提升首屏性能；对于旧浏览器，采用Intersection Observer API结合data-src实现自定义懒加载；再配合srcset和sizes响应式属性，按设备加载合适图片，兼顾性能与兼容性。

在HTML5中优化图片加载，核心是提升页面性能、减少初始负载，尤其对含大量图片的网页尤为重要。其中，lazy-loading（懒加载）是一种关键策略，它让图片仅在用户滚动到其可视区域时才开始加载，从而加快首屏渲染速度、节省带宽。

使用原生 loading 属性实现懒加载

现代浏览器支持通过 loading="lazy" 属性实现图片和iframe的懒加载，无需JavaScript即可完成。

语法简单：

说明：

• loading="lazy"：延迟加载，直到接近视口时才请求资源
• loading="eager"：默认行为，立即加载

该方式兼容性良好（Chrome、Edge、Firefox、Opera等主流浏览器均支持），推荐优先使用。

结合 Intersection Observer 实现自定义懒加载

对于需要兼容旧浏览器或更精细控制的场景，可使用 JavaScript 的 Intersection Observer API 来实现懒加载。

基本思路：

• 将真实图片地址存放在 data-src 属性中
• 初始 src 使用占位图（如透明GIF）
• 当元素进入视口时，用 JavaScript 将 data-src 的值赋给 src

示例代码：

配合响应式图片进一步优化

结合 srcset 和 sizes 属性，可根据设备屏幕自动加载合适尺寸的图片，与懒加载叠加使用效果更佳。

例如：

这样既实现了懒加载，又避免了移动端加载过大图片造成浪费。

基本上就这些。优先使用原生 loading="lazy"，兼顾兼容性时用 Intersection Observer，再搭配响应式属性，就能高效优化图片加载。不复杂但容易忽略细节。