问题：当用户网速慢或网络不通畅时图片加载前后下方的元素会发生抖动(位移)如下图所示
我们给图片img套个id为wrapper的div标签并设置他的样式
<body>
<div id="app">
<div id="wrapper"><!-- 新增的wrapper标签 -->
<img src="./timg.jpg" alt="" id="img">
</div>
</div>
<div>
<p>text</p>
</div>
</body>
<style type="text/css">
#app{
width:240px;
}
#wrapper{
overflow:hidden;
height:0;
padding-bottom:66.67%;
/* padding-bottom的值为图片的height/width的值 */
/* 此图尺寸为240*160故padding-bottom为160/240=66.67% */
}/* 新增的css样式 */
#img{
width:100%;
}
</style>
加了这三行css代码表示给即将加载的图片预留了位置并用padding-bottom填充
再次刷新页面问题解决！