版本
Swiper 4.5.3
lazyload.js 1.9.3
Swiper轮播 是x轴滚动,不知道什么什么lazyload监听了x轴,而不是正常浏览Y轴滚动,导致图片已经进入视图了还不显示,必须要接近顶部了才触发,如下图:
发现一个很关键的元凶 ,就是Swiper 的列表容器 .swiper-wrapper的css使用了 display:flex;导致lazyload监听了x轴。但是这个swiper-wrapper又必须是display:flex;,把这个注释掉lazyload正常加载,但是样式已经面目全非。
当你滑动Swiper到最后一张是他就触发第二行的lazyload,
`
.swiper-wrapper {
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform,-webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
`
如何让lazyload不去监听swiper-wrapper横向滚动加载呢?
苦恼了一整天了,实在是想不到什么办法,求助大佬们帮帮忙!!