Swiper中文论坛

标题: swiper跳转后再返回的卡顿问题 [打印本页]

作者: yhls 时间: 2017-7-20 11:29
标题: swiper跳转后再返回的卡顿问题
swiper跳转时，将其index存入sessionstorage中，从跳转页面返回时，将swiper  slideTo 指定的index, 经测试，安卓手机在网络不好时，会出现卡顿问题（卡在第一页），需要刷新一下页面才能滑动到指定index页，（iphone则一切正常）求大神帮忙

html
      <div class="swiper-container">
         <div class="swiper-wrapper">
            <div class="swiper-slide">
                  <img src="images/1.jpg"/>
            </div>
            <div class="swiper-slide">
                  <img data-src="images/2.jpg" class="swiper-lazy"/>
                  <div class="swiper-lazy-preloader"></div>
                  <i class="check"></i>
            </div>
            ...
            <div class="swiper-slide">
                  <img data-src="images/17.jpg" class="swiper-lazy"/>
                  <i  class="check"></i>
            </div>
         </div>
      </div>

js (依赖jq)
$(function(){

function fixPagesHeight() {
$('.swiper-slide,.swiper-container').css({
      height: $(window).height(),
})
}
$(window).on('resize', function() {
fixPagesHeight();
})
fixPagesHeight();

var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical',
// 图片懒加载
lazyLoading: true,
lazyLoadingInPrevNext: true,
lazyLoadingInPrevNextAmount: 2,
lazyLoadingOnTransitionStart: true,
// 页面切换的过渡效果
onProgress: function(swiper) {
      for (var i = 0; i < swiper.slides.length; i++) {
         var slide = swiper.slides[i];
         var progress = slide.progress;
         var translate, boxShadow;

         translate = progress * swiper.height * 0.8;
         scale = 1 - Math.min(Math.abs(progress * 0.2), 1);

         if (i == swiper.myactive) {
            es = slide.style;
            es.webkitTransform = es.transform = 'translate3d(0,' + (translate) + 'px,0) scale(' + scale + ')';
            es.zIndex=0;

         }else{
            es = slide.style;
            es.webkitTransform = es.transform ='';
            es.zIndex=1;
         }
      }
},
onTransitionEnd: function(swiper, speed) {
      swiper.myactive = swiper.activeIndex;
}
});

var index = sessionStorage.getItem("index");
if(index){
mySwiper.slideTo(index, 1000, false);
}

// 点击放大镜图标跳转对应图片（方便放大查看）
$(".check").on("click", function(){
var i = mySwiper.activeIndex;
sessionStorage.setItem("index",i);
var url = $(this).prev("img").attr("src");
window.location.href = "check.html?src=" + url;
});

});

微信图片_20170720111944.png (86.65 KB, 下载次数: 92)

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)