在轮播图中去抖动

问题:在页面中存在抖动问题,如下图所示,当网速较慢的时候,图片加载的比较慢,当图片没有加载完前,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>

添加样式
.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%

 

 

 

 

 

 

 

 

 

 

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型&#160;...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...