避免在网页上加载图像时出现回流/闪烁的方法？

Question

我的网页看起来像这样：

Image on the left - text on the right 

如果Web服务器是特别忙（或反正连接速度慢）网页闪烁。 它看起来像是在左边显示文字，然后在右边突然移动它，图像被检索到。

这是相当标准的，我知道。

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

我是否应该将图像包装在固定宽度和高度的div上？

还是有更好/（更标准）的解决方案？

由于

Answer 1

您应该定义图像的大小。

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

如果重要的是要有放置填充符，请指定alt属性。该属性的值将显示，直到图像加载完成。

Answer 2

指定图像的宽度和高度与在div

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

Answer 3

只要把图像中的图像标签中的相应属性，并设置一个固定的宽度为这个div =）