浏览器加载一个页面，会先加载 html 文档，在渲染文档的同时加载图片。很多网站的 img 元素是没有 width、height 属性的，我的也没有设置。这样浏览器在渲染文档的时候，不会给图片留出空间，在开始加载图片，知道图片的实际宽高之后，再留出图片的空间。这样就造成在网页加载的过程中，网页的高度会逐渐变高，垂直滚动条会闪烁跳动。
之前我采用了这样的一个解决方案，先设置 body 元素为不可见：
body
{
visibility: hidden;
}
在 onload 事件里面设置为可见：
$(window).load(function () {
$("body").css("visibility", "visible");
});
这样推迟图片的显示时间来防止网页在加载的时候高度产生变化，因为 body 元素不可见了，所以网页高度的变化是看不到的，但是 visibility: hidden 的元素会占位，所以垂直滚动条还是会闪烁。
问题是 window.onload 事件会在图片完全加载之后触发，当网页的图片多了，显示速度会明显变慢，网页打开的时候有几秒钟的空白其实就挺令人难受的了。
所以我删除了上面的代码，不用这种做法了。
有趣的是在我把 body 元素设置为不可见的时候，百度快照抓取了我的网页，结果当然是一片空白了……
我保留了这个“百度快照的快照”
因为快照不会执行网页的脚本，所以 body 元素不可见。把 body 元素设置为可见后，是这样的：
http://bibaoke.com/snapshot?visibility=visible
百度的快照页面做得相当的粗糙，应该是很多年都没有改进过。直接在原网页的 html 元素外层加了一个 div，以致于原网页的样式可以影响百度加进来的内容。
现在很多网站会用到一种延时加载图片的方法，图片在浏览器的可视区域内的时候，才去加载。这种方法可以加快网页的加载速度，但是要防止网页在加载的时候高度产生变化，有一个前提条件就是要设置 img 元素的 width 和 height。因为在文档加载的时候，就要让浏览器知道需要预留的空间。
几年前我看到前公司的网站也使用了这种延时加载的方法，效果还是很显著的。因为是电商网站，商品的图片尺寸都是固定的，所以 img 的 width 和 height 是比较容易设置的。一些社区、博客类网站就稍微麻烦一点，因为文章的配图大小不一，这样就需要在保存图片的同时，也保存图片的尺寸信息。
我认为只要有时间去追求更好的用户体验，img 的 width 和 height 属性还是要设置的。