首页 > 代码库 > swiper的延迟加载(非官网方法)

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

网上找的: 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 = http://www.mamicode.com/$( 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 = http://www.mamicode.com/$( this ).attr( "data-src" );
    $(this).attr("src", src);
    $(this).fadeOut(0).fadeIn(500);
})

 

自己写的swiper2的延迟加载

var bannerSwiper = new Swiper(.banner_picbox, {
        pagination: .banner_picfocus,
        speed: 900,
        loop: true,
        autoplay: 5000,
        paginationClickable: true,
        onSlideChangeStart : function(swiper) {
            $( ".swiper-slide-active img" ).each(function ( index ) {
                var dataSrc = http://www.mamicode.com/$(this).attr("data-src");
                var origSrc = http://www.mamicode.com/$(this).attr("src");
                if(dataSrc !== origSrc){
                    $(this).attr("src", dataSrc);
                }
            })
        }
    })

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

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

 

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