swiper遇到的问题及解决方法

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

上一家公司主要是做些微信的场景页啥的，然后需要快速开发，所以第一时间选择了swiper，毕竟开发快速，比较方便然后api多（虽然并没有用很多），用这个的朋友。缺点的话有时候用了就晓得，下面开始讲讲，第一次写，有啥不对的请大家指正，虚心学习。

这边swiper的使用发法可以去官网看看，传送门：http://www.swiper.com.cn

一般来说，H5场景开始有个loading吧，就建一个div，全屏的大小，可以加个loading动画啥的，然后这就用到了预加载，您可以选择一个合适的预加载js，比如relLoader.js。也可以自己写一个方法

function _LoadImg(b, e) {
var c = 0,
a = {},
d = 0;
for (src in b) {
d++;
}
for (src in b) {
a[src] = new Image();
a[src].onload = function() {
if (++c >= d) {
e(a)
}
};
a[src].src = b[src];
}
}

_LoadImg([
'images/1-beijing.jpg',
'images/2-beijing.jpg',
],

function() {
var loader = document.getElementById('loading');
document.body.removeChild(loader);
});

下方是swiper动画的js，官网拷贝下来的

<script>

var mySwiper = new Swiper ('.swiper-container', {

onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit

swiperAnimateCache(swiper); //隐藏动画元素

swiperAnimate(swiper); //初始化完成开始动画 },

onSlideChangeEnd: function(swiper){

swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画

}

})

</script>

接下来你发现loading已经结束了，但是加在首屏的动画为啥都不动了，其实人家在你loading的时候已经加载完成了，所以动画已经执行了。

解决办法很简单的

setTimeout(function(){
swiperAnimate(swiper);
},1000);//初始化完成开始动画

设置一个延迟，看看效果，这回就可以了。

问题：

部分iphone（比如iphone6p）手机打开H5会闪退。这些H5大部分都是微信端使用的，所以微信这位爷要好生照顾，之前微信是分为android和ios版，他们的内核都不一样的，会些问题，很多人都收到过摧残。原因有几个吧加载的图片啥的太多了，动画过多吧或者H5的页数很多，都是有可能的。

解决办法呢：

就是预加载的时候加载少量的图片

开启swiper的懒加载lazyLoading设为true啊，这时html里面也要修改<img data-src="path/to/picture-1.jpg" class="swiper-lazy">