首页 > 其他 > 详细

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

时间:2017-03-08 19:13:15      阅读:299      评论:0      收藏:0      [点我收藏+]

网上找的: 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();
    })

 

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

原文:http://www.cnblogs.com/alantao/p/6520596.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!