本文主要是介绍在轮播图中去抖动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
问题：在页面中存在抖动问题，如下图所示，当网速较慢的时候，图片加载的比较慢，当图片没有加载完前，test是在图片的左上角位置此时不显示图片，当图片加载完，test在图片的左下角，这时候的变化就是页面抖动。
发生抖动的原因：当图片没有加载完成前，img的高度为0，没有将其撑开，等到图片加载完之后，img被撑开
解决方法：通过给swiper的父级元素设置一个固定的高度来解决的，width:100%,height:0,padding-bottom:31.25%
在<swiper-slide>上面加一层<div>
<div class='wrapper'><swiper-slide><img class="swiper-img" src=""/></swiper-slide><swiper-slide><img class="swiper-img" src=""/></swiper-slide>
</div>添加样式
.wrapperwidth:100%height:0padding-bottom:31.25%overflow:hidden.swiper-imgwidth:100%
可以通过下面的形式来设置宽高比，但有浏览器兼容问题
.wrapperwidth:100%height:31.25vw.swiper-imgwidth:100%
这篇关于在轮播图中去抖动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
