码迷,mamicode.com
首页 > 其他好文 > 详细

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

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

标签:hub   limits   speed   cli   color   tde   click   nat   play   

网上找的: 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的延迟加载(非官网方法)

标签:hub   limits   speed   cli   color   tde   click   nat   play   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!