上一家公司主要是做些微信的场景页啥的,然后需要快速开发,所以第一时间选择了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">
问题:
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");
还有很多问题可以一起讨论,发现写这个也不是件简单的事情,水平有限哈,请多多指教。祝大家工作顺利!!