移动端开发 - 防止页面加载图片缓慢时，布局出现抖动

布局出现抖动是何现象？
答：在网络不佳的情况下，页面加载时，文字相对图片会加载更快些，图片存在的位置会被其他内容给占用，只有当图片加载成功渲染到页面后才能正常显示，这时就会出现页面抖动现象了

解决办法：在图片内容区域外增加一层div，并设置以下css样式

.wrapper{
  width:100%;
  height:0;
  overflow:hidden;
  padding-bottom:45%;  // 百分比是按照实际UI图片的高度相对于宽度的百分比
  background-color:#eee;
}

Last modification：March 31st, 2019 at 09:51 am

如果觉得我的文章对你有用，请随意赞赏

admin • 2026 年 Jan 月 Mon 日

布局出现抖动是何现象？
答：在网络不佳的情况下，页面加载时，文字相对图片会加载更快些，图片存在的位置会被其他内容给占用，只有当图片加载成功渲染到页面后才能正常显示，这时就会出现页面抖动现象了

解决办法：在图片内容区域外增加一层div，并设置以下css样式

.wrapper{
  width:100%;
  height:0;
  overflow:hidden;
  padding-bottom:45%;  // 百分比是按照实际UI图片的高度相对于宽度的百分比
  background-color:#eee;
}