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();
        })
  • 相关阅读:
    excel 批量修改sql
    js select 改变当前选中option
    servlet 显示服务器上的图片
    @Security权限验证拦截参数
    签字 变成 图片 纯js+html实现
    web 的项目 搭乘war包,运行时候却找不到jar包
    jquery监听扫码枪获得值
    妹子的js 万一哪一天资源找不到了 记录下来
    react系列---【redux安装、创建仓库】
    react系列---【redux进阶】
  • 原文地址:https://www.cnblogs.com/alantao/p/6520596.html
Copyright © 2011-2022 走看看