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">

lazyLoadingInPrevNext设置为true容许将延迟加载应用到最接近的slide的图片（前一个和后一个slide）。或者

lazyLoadingOnTransitionStart默认当过渡到slide后开始加载图片，若是你想在过渡一开始就加载，设置为true

lazyLoadingInPrevNextAmount 设置在延迟加载图片时提早多少个slide。个数不可少于slidesPerView的数量。 默认为1，提早1个slide加载图片，例如切换到第三个slide时加载第四个slide里面的图片。

根据需求来作呗，

问题：

swiper无法加两个动画，举个栗子：你要div入场一个动画，而后入场动画执行完了这个div再循环执行一个小动画，这个swiper无法帮你哦，你要这个有个啥swiper.animate-twice.min.js的，能够去尝试一下，但我以为很差使。

解决办法：事件监听，监听这个div，第一个动画执行完成，而后给加上一个循环的动画，因此有这个方法

var youxiu = document.getElementById("youxiu");
function setAni(obj,type,duration,delay,cName){
obj.addEventListener("webkitAnimationEnd",function(){
this.setAttribute("swiper-animate-effect",type);
this.setAttribute("swiper-animate-duration",duration);
this.setAttribute("swiper-animate-delay",delay);
this.className = cName;
swiperAnimate(mySwiper);
},false);
}
setAni(youxiu,"pulses","2s","0.3s","full swiper-lazy ani");

 

 

还有不少问题能够一块儿讨论，发现写这个也不是件简单的事情，水平有限哈，请多多指教。祝你们工做顺利！！