未设置固定尺寸的响应式图片能否支持浏览器原生懒加载？

可行的原生懒加载变通方案 #

方案1：声明图片原始宽高属性配合响应式CSS（最推荐） #

这是W3C推荐的标准实现方式，完全不需要设置固定显示尺寸：

• HTML侧：仅需要在<img>标签上填写图片的原始宽高数值，同时添加loading="lazy"属性，示例代码：

  <img src="example.jpg" loading="lazy" width="1200" height="800" alt="示例图片">
  

• CSS侧：添加全局样式让图片自适应容器宽度，同时保持原始宽高比：

  img {
    max-width: 100%;
    height: auto;
  }
  

这种实现下，浏览器会在页面解析阶段就根据你填写的原始宽高属性自动计算出图片的占位比例，既不会让图片固定尺寸，也完全满足Chrome原生懒加载的触发条件，同时还能避免图片加载后的布局偏移。

方案2：直接给img元素设置aspect-ratio属性 #

如果不方便提前获取所有图片的原始宽高，可以直接在CSS中给图片指定宽高比，不需要额外外层div包裹：

• HTML侧正常添加懒加载属性：

  <img src="example.jpg" loading="lazy" alt="示例图片">
  

• CSS侧指定宽高比：

  img {
    width: 100%;
    aspect-ratio: 16/9; /* 按你的业务需求调整比例 */
    object-fit: cover; /* 避免图片拉伸 */
  }
  

Chrome 88及以上版本支持直接对img元素使用aspect-ratio属性，浏览器可以提前计算出图片占位空间，正常触发原生懒加载。

关于JS懒加载库的限制说明 #

如果你的场景完全无法提前确定图片的宽高或宽高比，可以选择成熟的JS懒加载库实现需求：

• 绝大多数JS懒加载库没有必须提前设置图片尺寸的限制，这类库是通过监听元素与视口的交叉状态触发加载，只要元素存在于DOM中即可触发懒加载
• 缺点是没有提前预留占位空间的话，图片加载完成后会出现页面布局偏移，影响用户体验，还是建议尽量给图片预留占位区域

你之前用外层div设置aspect ratio的方案不生效，是因为Chrome原生懒加载需要检测<img>元素自身的可计算布局空间，仅外层容器有尺寸的情况下，浏览器解析阶段无法识别img元素的占位大小，因此不会触发懒加载逻辑。

内容的提问来源于stack exchange，提问作者S. Scholte