在轮播图中去抖动

问题：在页面中存在抖动问题，如下图所示，当网速较慢的时候，图片加载的比较慢，当图片没有加载完前，test是在图片的左上角位置此时不显示图片，当图片加载完，test在图片的左下角，这时候的变化就是页面抖动。

发生抖动的原因：当图片没有加载完成前，img的高度为0，没有将其撑开，等到图片加载完之后，img被撑开

解决方法：通过给swiper的父级元素设置一个固定的高度来解决的，width:100%,height:0,padding-bottom:31.25%

在上面加一层


  
    
  
  
    
  


添加样式
.wrapper
  width:100%
  height:0
  padding-bottom:31.25%
  overflow:hidden
  .swiper-img
    width:100%

可以通过下面的形式来设置宽高比，但有浏览器兼容问题

.wrapper
  width:100%
  height:31.25vw
  .swiper-img
    width:100%