图片懒加载时为什么CLS值还是很高？

司空鹏宇提问于 2026-02-17 13:59:25 阅读 33

前端

我在做图片列表页时用了懒加载，给标签设置了固定宽高和object-fit: cover，但Lighthouse检测CLS还是0.2以上。页面滚动到图片位置时偶尔还是会抖动，试过加loading="lazy"和设置aspect-ratio都没好转，这是为什么呢？

代码结构是这样的：


<div class="image-container">
  <img 
    src="placeholder.jpg" 
    data-src="{{dynamicUrl}}" 
    class="lazyload" 
    style="--aspect-ratio:100%"
    width="320" 
    height="240"
  >
</div>

对应的CSS用了aspect-ratio计算：


.image-container {
  padding-bottom: calc((240/320)*100%);
  position: relative;
}
img {
  width: 100%;
  height: 100%;
}

检查发现图片实际下载尺寸和声明的宽高偶尔不一致，这会导致布局偏移吗？有什么更好的解决方案？

我来解答赞 5 收藏

反馈

2 条解答

开发者倚凡 Lv1

这问题我也遇到过，CLS高确实让人头疼。你现在的做法已经很接近了，但有几个地方可以改进。

首先，aspect-ratio这个CSS属性虽然好用，但在某些浏览器里表现不太稳定。我建议直接在容器上使用padding-bottom来保持比例更靠谱。

给你个更稳定的方案，试试这样改：

<div class="image-container">

  <img 

    src="placeholder.jpg" 

    data-src="{{dynamicUrl}}" 

    class="lazyload" 

    width="320" 

    height="240"

    style="position:absolute;top:0;left:0;width:100%;height:100%"

  >

</div>

CSS改成这样：

.image-container {

  width: 320px;

  position: relative;

  padding-bottom: 75%; /* 240/320 */

  overflow: hidden;

}

另外，记得给你的图片设置一个最小高度，防止加载时出现闪动：

img {

  min-height: 1px;

  display: block;

}

最后检查一下你的JavaScript懒加载实现，确保在图片加载完成前不会改变尺寸。如果用的是插件，看看是否需要更新版本。

这些调整应该能帮你把CLS降下来，亲测有效。做前端优化就是这么折腾，慢慢调吧。

2026-03-30 08:01

Designer°利娜 Lv1

这个问题我之前也踩过坑，说白了就是浏览器在图片加载完成前没法准确计算布局，哪怕你设置了宽高和aspect-ratio，还是会因为图片的真实尺寸和占位尺寸不一致导致抖动。

首先你要知道，CLS高的核心原因是布局偏移，而图片懒加载时最常见的问题就是占位符和实际图片尺寸不匹配。你提到检查发现图片下载的尺寸偶尔和声明的宽高不一致，这就是罪魁祸首。即使你用了固定宽高和aspect-ratio，但如果图片的真实宽高比和占位的宽高比不一样，浏览器重新渲染时就会调整布局，CLS自然就高了。

我的建议是这样：别只依赖CSS的aspect-ratio，而是确保占位符和真实图片的宽高比完全一致。具体来说，你可以用一张和目标图片尺寸一致的低质量占位图（LQIP），或者直接用padding-top来模拟图片比例。这里给你一个改过的代码示例：

<div class="image-container">

  <img 

    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 240'/%3E" 

    data-src="{{dynamicUrl}}" 

    class="lazyload" 

    width="320" 

    height="240"

    style="object-fit: cover;"

  >

</div>



<style>

.image-container {

  position: relative;

  width: 100%;

  padding-top: calc((240 / 320) * 100%);

}

img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

</style>

这里我把占位图换成了一个透明的SVG，它的宽高比是固定的320x240，和你的图片一致。这样浏览器在加载真实图片前就能完全确定布局，避免抖动。

另外，记得在懒加载逻辑里处理好图片加载完成后的替换。如果你用的是IntersectionObserver，确保监听到图片进入视口后才去加载真实图片，并且加载完成后立刻替换src属性。

还有一个小细节，别忘了给图片加上decoding="async"属性，这样可以让浏览器异步解码图片，减少对主线程的影响。

总结一下，关键点就是：确保占位符和真实图片的宽高比完全一致，推荐用SVG或padding-top实现占位；懒加载逻辑要精确控制图片加载时机；最后加上一些优化属性比如decoding。按照这个思路调整，CLS应该能降到0.1以下，别走弯路了。

2026-02-17 14:03