查看: 2318|回复: 0
打印 上一主题 下一主题

swiper跳转后再返回的卡顿问题

[复制链接]

该用户从未签到

1

主题

1

帖子

22

积分

新手上路

Rank: 1

积分
22
跳转到指定楼层
楼主
发表于 2017-7-20 11:29:25 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
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, 下载次数: 91)

微信图片_20170720111944.png
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享1 分享淘帖
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2024-11-24 07:26 , Processed in 0.070015 second(s), 31 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表