img 标签设置 width 属性后如何避免图片加载时的布局跳动

图片加载时布局跳动的原因

浏览器在解析 HTML 时遇到 img 标签，若未指定高度属性，会先按默认尺寸或零高度渲染占位，导致页面元素位置发生偏移。当图片资源加载完成后，浏览器根据图片的固有尺寸重新计算布局，造成页面内容突然跳动。这种布局不稳定会干扰用户阅读体验，并可能影响页面滚动位置。

MDN 的测试任务中明确指出，给 img 元素设置 width 属性后，必须同时设置一个适当的高度值，以保持正确的宽高比，并防止加载时重新渲染。图片的固有尺寸为 615 x 419 像素，若仅设置 width 为 400，不设置 height，浏览器无法预知图片加载后的最终高度，从而引发布局抖动。

要避免布局跳动，需要根据图片的固有宽高比计算并设置高度属性。计算公式为：目标宽度乘以固有高度除以固有宽度。在本例中，固有宽度为 615，固有高度为 419，目标宽度为 400。将数值代入公式：400 x 419 / 615，计算结果约为 273。因此，应将 height 属性设置为 273。

在编写代码时，应确保 width 和 height 属性同时存在且数值正确。例如，在 MDN 的示例代码中，img 标签被设置为 width=400 和 height=273。这种做法让浏览器在解析 HTML 阶段就能确定图片的显示尺寸，从而在图片资源加载完成前保持页面布局的稳定。

可以通过浏览器开发者工具的“网络”面板模拟慢速网络，观察图片加载前后的页面布局变化。在开发者工具中，右键点击图片元素，选择“检查”，查看计算后的样式。如果 width 和 height 属性已正确设置，页面在图片加载过程中应保持布局不变，不会出现元素位移或抖动。

另一种验证方法是查看图片的渲染尺寸。在开发者工具的“元素”面板中，选中 img 标签，查看“Computed”选项卡。如果 width 和 height 属性值与计算值一致，且页面布局在加载过程中保持稳定，则说明设置正确。若发现布局跳动，需检查是否遗漏了 height 属性或计算公式是否正确。

除了避免布局跳动，设置 width 和 height 属性还能提升图片的加载性能。浏览器在渲染页面时，若已知图片的显示尺寸，可以提前预留空间，避免页面重排。此外，设置宽高属性还能防止图片加载后撑破容器，确保页面布局的一致性。

在实际开发中，建议始终为 img 标签设置 width 和 height 属性，尤其是对于重要图片或首屏图片。如果图片尺寸较大，可以使用 CSS 的 max-width 属性控制显示宽度，同时结合 JavaScript 动态计算高度，以适应不同的屏幕尺寸。