图片加载速度慢导致的页面布局抖动——解决方法

页面加载完成前后为什么会出现抖动？

页面加载时之所以会出现抖动现象，是因为在没有设置img的width,height属性值的情况下，浏览器无法获取图像的尺寸，也就无法为图像保留合适的空间，因此当我们刷新页面时，页面中的图像在加载完成前后的布局发生了变化，因此视觉上产生了页面抖动的现象。

解决方法1——设定图像宽高的具体值

为图像指定 height 和 width 属性，设置了这些属性，就可以在页面加载时为图像预留空间。

提示：不要通过 height 和 width 属性来缩放图像。如果通过 height 和 width 属性来缩小图像，那么用户就必须下载大容量的图像（即使图像在页面上看上去很小）。正确的做法是，在网页上使用图像之前，应该通过软件把图像处理为合适的尺寸。

为什么要使用 height 和 width 属性？

文档加载时其内容显示出的不规律的移动，是因为浏览器为了能够显示每一个加载的图像，而不断地重新调整页面的布局。浏览器通过下载并解析出图像的宽度和高度来决定图像的大小，然后就会在显示窗口中留出一个相应的矩形空间。然后浏览器就会调整页面的显示布局，以便把图像插入到显示当中。这同时也告诉我们，图像是独立的文件，它与源文件都分别是独立加载的。

但是这不是一种最有效的显示文档的方法，因为浏览器在显示相邻的以及后面的文档内容之前，必须要检查每一个图像文件，并计算它们的屏幕空间。这可能会给文档的显示带来非常大的延迟，从而打断用户的阅读。对于创作者来说，通过img标签的height和width属性指定图像的尺寸是一种有效的解决方法，这样浏览器在加载完成图像之前就预留出了图像的位置，从而加速了文档的显示，也避免了文档内容的移动。

解决方法2——设定图片的宽高比例

假如图像的宽位500,高为300,高宽比为60%，那么就可以根据图像的宽高比例来预留空间

.img-content{
width: 100%;
height: 0;
overflow: hidden;
padding-bottom: 60.0%;
}

此处设置padding-bottom为60.0%是相对于img-content的父元素大小来决定的，又因为默认box-sizing为content-box，所以宽高是元素本身的宽高，设置了高度为零，高度就由padding-bottom撑开。