zoukankan      html  css  js  c++  java
  • 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 = $( 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();
        })
  • 相关阅读:
    expect简介和使用例子(转)
    openshift网络
    openstack相关
    SDN的开源方案sonic
    OpenStack Neutron ML2 Deep Dive
    2017双11技术揭秘—阿里数据库计算存储分离与离在线混布
    es的gui工具
    django orm中blank和null的区别
    断关联多表关系阐述
    视图使用
  • 原文地址:https://www.cnblogs.com/alantao/p/6520596.html
Copyright © 2011-2022 走看看