swiper的延迟加载（非官网方法）

Posted 2020-09-03 AlanTao

网上找的： 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: 900,
        loop: true,
        autoplay: 5000,
        paginationClickable: true,
        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);
                }
            })
        }
    })

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

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