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();
        })
  • 相关阅读:
    JS元素分组统计
    并发工具类
    【Spring-Cloud】mall eureka微服务模块建立
    【Spring-Cloud】mall父工程建立
    【MySQL】创建函数和存储过程,批量插入大数据
    【JAVA】http 状态
    【JAVA】如何写好代码
    【Docker】dockerfile,支持jdk8、 sshd、 python3.6
    【Hadoop】MapperReduce WordCount 代码示例
    【Hadoop】YARN 完全分布式配置
  • 原文地址:https://www.cnblogs.com/alantao/p/6520596.html
Copyright © 2011-2022 走看看