swiper的延迟加载(非官网方法)

  • Post author:
  • Post category:其他


网上找的: https://github.com/nolimits4web/Swiper/issues/626

var tabsSwiper = new Swiper('#games-content',{
    onlyExternal : true,
    speed:400,
    onSlideChangeStart : function(swiper) {
    $( ".swiper-slide-active img" ).each(function ( index ) {
    var src = $( this ).attr( "data-src" );
        $(this).attr("src", src);
        $(this).fadeOut(0).fadeIn(500);
    })
    }
})

//Load the First images
$( ".swiper-slide-active img" ).each(function ( index ) {
var src = $( this ).attr( "data-src" );
    $(this).attr("src", src);
    $(this).fadeOut(0).fadeIn(500);
})

自己写的swiper2的延迟加载

var bannerSwiper = new Swiper('.banner_picbox', {
        pagination: '.banner_picfocus',
        speed: 1000,
        loop: true,
        autoplay: 4000,
        paginationClickable: true,

        // 当Swiper初始化完成
        onSwiperCreated: function(swiper){
            var current = $(".swiper-slide-active");
            var origSrc = current.find("img").attr("src");
            var dataSrcnext = current.next().find("img").attr("data-src");
            current.next().find("img").attr("src", dataSrcnext);
        },

        // 当碰触到slider时执行
        onSlideChangeStart : function(swiper) {
            // $( ".swiper-slide-active img" ).each(function ( index ) {
            //     var dataSrc = $(this).attr("data-src");
            //     var origSrc = $(this).attr("src");
            //     if(dataSrc !== origSrc){
            //         $(this).attr("src", dataSrc);
            //     }
            // })
            var current = $(".swiper-slide-active");
            var origSrc = current.find("img").attr("src");
            var dataSrc = current.find("img").attr("data-src");
            var dataSrcprev = current.prev().find("img").attr("data-src");
            var dataSrcnext = current.next().find("img").attr("data-src");
            current.find("img").attr("src", dataSrc);
            current.prev().find("img").attr("src", dataSrcprev);
            current.next().find("img").attr("src", dataSrcnext);
        }
    })

bannerWrap.hover(function(){


bannerSwiper.stopAutoplay();

},function(){


bannerSwiper.startAutoplay();

});

    prev.on("click", function (e) {
        e.preventDefault();
        bannerSwiper.swipePrev();
    })

    next.on("click", function (e) {
        e.preventDefault();
        bannerSwiper.swipeNext();
    })

转载于:https://www.cnblogs.com/alantao/p/6520596.html