bug: 轮播图在较差网络情况下,渲染的过程会出现闪屏的现象
原因: 图片尚未加载,屏幕上的位置可能会被轮播图后面的dom元素填充,当轮播图加载出来之后,又会把下面的内容”挤“下去
解决方法:给轮播图增加一个父级,固定父级的位置,这样就能正常渲染
那么,如何设定父级的宽高呢?
根据图片的宽、高来设置父级元素的宽高
如何设置???
首先,获取图片宽、高: 当前例子:宽:750px;高:200px;
然后给父级设置样式: 高/宽 200/750 = 26.7%
等价于
.wrapper { width: 100%; height: 26.7vw; }
考虑到不同浏览器兼容问题,还是优先考虑以下代码:
.wrapper { // 保持高宽比始终26.7% overflow: hidden; width: 100%; height: 0; padding-bottom: 26.7%; background: #eee; .swiper-img { width: 100%; } }