頁面加載抖動問題
在web開發中，經常會遇到這樣一個問題，比如一個寬度百分百，高度自適應的圖片，在網速慢的情況下加載過程中會出現抖動的問題（未加載圖片前容器的高度為0，圖片加載完成后下面的內容會被擠下去）。
這種問題如果是圖片有固定高度，就不會出現加載抖動。但一般情況下，為了使圖片不被拉伸，高度一般設為自適應，那么為了防止加載抖動，我們需要給圖片提前占個位，這里使用的是css的padding-bottom百分比進行占位。
示例代碼如下
.img-box{
overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 50%;
}
padding-bottom實際上是提前占位了，這個容器的高度始終是0，高度為0還之所以能夠顯示內容是因為內容溢出在了padding-bottom上，這里的50%是圖片的高寬比例，切記是相對於父元素寬度的50%（即.img-box的上一級），不是相對於自己的width，詳情請看下面的例子。
這里寫了一個小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>padding-bottom</title>
<style>
.content{
width: 400px;
height: 400px;
margin: 100px auto;
background-color: aquamarine;
}
.box1{
width: 100%; /* 400px 相對於content的width */
height: 0;
padding-bottom: 50%; /* 200px 相對於content的width */
background-color: red;
}
.box2{
width: 25%; /* 100px 相對於box1的width */
height: 0;
padding-bottom: 25%; /* 100px 相對於box1的width */
background-color: yellow;
}
</style>
</head>
<body>
<div class="content">
<div class="box1">
<div class="box2"></div>
</div>
</div>
</body>
</html>
如圖所示
這種情況下box2中如果有圖片寬高比為一比一時（根據padding的百分比），加載過程中就不會出現抖動的情況，同理box1也是如此。
當然解決抖動還有其他方法，比如何以用vw（兼容性不太好，這里就不列舉了），還有比如在微信小程序中rpx，如果圖片的設計大小寬高為750×300時，就可以直接寫成height: 300rpx。