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();
        })
  • 相关阅读:
    VS插件哪家强?CodeRush v20.2帮你忙
    WinForms界面开发工具DevExpress WinForms v20.2亮点——全新Sankey Diagram控件震撼发布
    java中将信息写入excel
    java中使用IO流将以文件中的内容去取到指定的文件中
    java中使用IO流复制文件
    采购订单写入sap失败后,抛出自定义异常,回滚数据库
    java中将文件夹里面的文件复制到指定的文件夹(java IO)
    JAVA中IO流详解
    获取员工合同信息列表 定时任务
    Java连接MySQL数据库——含步骤和代码
  • 原文地址:https://www.cnblogs.com/alantao/p/6520596.html
Copyright © 2011-2022 走看看