解决图片加载导致的布局抖动：优化CLS的实用指南-html教程-PHP中文网

解决图片加载导致的布局抖动：优化CLS的实用指南

心靈之曲

发布： 2025-11-28 12:27:06

原创

704人浏览过

本文旨在解决网页中图片加载时引发的布局抖动问题。通过为解决图片加载导致的布局抖动：优化CLS的实用指南标签明确设置width和height属性，浏览器能在图片加载前预留所需空间，有效防止内容跳动，从而提升用户体验和页面性能指标，特别是累积布局偏移（cls）得分。

在现代网页开发中，用户体验和页面性能是至关重要的指标。其中，累积布局偏移（Cumulative Layout Shift, CLS）是衡量页面视觉稳定性的一项核心指标。当图片在加载过程中没有预留足够的空间时，会导致页面内容在图片加载完成后突然向下或向上移动，形成所谓的“布局抖动”，这严重影响用户体验，并可能导致用户误点击。

核心问题分析：图片未指定尺寸

布局抖动问题通常发生在图片元素未在HTML中明确指定其尺寸（宽度和高度）时。当浏览器首次渲染页面时，它会根据已有的文本内容和布局规则进行排列。如果图片尚未加载完成，浏览器就无法得知其最终尺寸，因此不会为其预留空间。一旦图片加载完成并被渲染，它会突然占据其所需的空间，从而“推开”周围的元素，导致页面布局发生意外的重排。

考虑以下Vue组件中的图片代码示例：

<img
  class="block rounded-xl mx-auto h-48 my-12 padel-img"
  :src="require('../assets/img/about-hero.jpg')"
  alt="about image"
/>

登录后复制

尽管这里使用了Tailwind CSS的h-48类来设置一个初始高度，并且有自定义的.padel-img样式来控制宽度，但在图片加载前，浏览器仍然无法完全确定其最终占据的矩形区域，尤其是在响应式布局中，宽度会根据视口动态调整，而高度则依赖于图片的原始宽高比。如果没有提供原始宽高比信息，浏览器就无法在图片加载前计算出正确的高度，从而导致布局抖动。

解决方案：为图片指定尺寸

解决布局抖动的最有效方法是为<img>标签直接添加width和height属性。这些属性应反映图片的原始（内在）尺寸。当浏览器解析HTML时，即使图片尚未开始下载，它也能根据这些属性计算出图片的宽高比，并为其预留一个基于该宽高比的占位符空间。

实施步骤：

获取图片原始尺寸： 找到about-hero.jpg这张图片的原始宽度和高度。假设这张图片的原始尺寸是1920像素宽，1080像素高。
添加到<img>标签： 将这些尺寸作为width和height属性添加到<img>标签上。

修改后的代码示例如下：

Lifetoon

免费的AI漫画创作平台

查看详情

<img
  class="block rounded-xl mx-auto h-48 my-12 padel-img"
  :src="require('../assets/img/about-hero.jpg')"
  alt="about image"
  width="1920"  <!-- 图片的原始宽度 -->
  height="1080" <!-- 图片的原始高度 -->
/>

登录后复制

工作原理：

当width和height属性被设置后，浏览器会执行以下操作：

计算宽高比： 浏览器利用width和height属性计算出图片的固有宽高比（例如，1920/1080 = 1.777...）。
预留空间： 即使图片还未加载，浏览器也会根据这个宽高比和CSS（例如width: 90%）设定的宽度，计算出相应的高度，从而预留一个正确的空间。
防止布局抖动： 这样，当图片最终加载完成并渲染时，它会填充已经预留好的空间，而不会导致周围内容的移动。

结合CSS和响应式设计

在现代响应式设计中，我们经常会使用CSS来调整图片的显示尺寸，例如width: 100%; height: auto;或使用Tailwind CSS的响应式类。当HTML中同时存在width和height属性以及CSS样式时，浏览器会智能地处理它们：

HTML属性定义宽高比： width和height属性主要用于向浏览器传达图片的固有宽高比，以便在加载前预留空间。
CSS控制实际渲染尺寸： CSS样式（如width: 90%; max-width: 1560px;和媒体查询中的width: 80%; height: unset;）会决定图片在不同视口下的实际渲染尺寸。浏览器会优先使用CSS定义的宽度，然后根据HTML属性提供的宽高比来计算实际渲染高度，从而确保图片在保持宽高比的同时适应布局。

例如，在您的CSS中：

.padel-img {
  width: 90%;
  max-width: 1560px;
}

@media screen and (min-width: 640px) {
  .padel-img {
    height: unset; /* 或 height: auto; */
    width: 80%;
  }
}

登录后复制

即使height被设置为unset（或auto），只要<img>标签上存在width和height属性，浏览器就能知道图片的原始宽高比。当CSS将图片宽度设置为90%或80%时，浏览器会根据这个比例和原始宽高比来计算出相应的高度，从而在图片加载前就预留出正确的垂直空间。h-48这个Tailwind类在这种情况下可能会被CSS的height: auto或height: unset所覆盖，但关键是宽高比信息已经存在，布局抖动得以避免。

注意事项与最佳实践

始终指定尺寸： 对于所有可见的图片元素，都应在<img>标签中明确指定width和height属性。
使用loading="lazy"： 对于非首屏的图片，可以添加loading="lazy"属性，实现图片懒加载，进一步优化页面加载性能。
响应式图片： 对于复杂的响应式图片需求，可以结合使用srcset属性和<picture>元素，为不同设备和屏幕密度提供优化过的图片资源，但同样需要确保每个<img>标签都带有width和height属性。
图片优化： 确保图片文件本身经过压缩和优化，使用现代格式（如WebP），以减少文件大小，加快加载速度。
服务端渲染 (SSR) / 预渲染： 如果项目使用Vue.js进行服务端渲染或预渲染，确保在渲染HTML时，图片标签已经包含了width和height属性。