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

 

 

還有不少問題能夠一塊兒討論，發現寫這個也不是件簡單的事情，水平有限哈，請多多指教。祝你們工做順利！！