如何避免在网页上加载图像时出现回流/闪烁？

Question

我的网页看起来像这样：

Image on the left - text on the right

如果网络服务器特别忙(或者无论如何连接很慢)，网页就会闪烁。它看起来像是在左边显示文本，然后它突然移动到右边，检索到了图像。

这是非常标准的，我知道。

问题是:我如何避免这种情况？

我应该把图像换成固定宽度和高度的div吗？

或者有更好的/(更标准的)解决方案？

谢谢

Answer 1

您应该定义图像的大小。

<img height="100" width="100" /> <!-- or -->
<img style="width:100px;height:100px;" />

如果有一个位置填充符很重要，请指定一个alt属性。此属性的值将一直显示到图像加载完成。

Answer 2

使用image标签中的相应属性指定图片的宽度和高度

<img src="..." width="..." height="..." />

Answer 3

只需将图像放入div并为该div设置固定宽度=)