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();
        })
  • 相关阅读:
    【codeforces 510D】Fox And Jumping
    【codeforces 755E】PolandBall and White-Red graph
    实用SQL语句大全
    经典SQL语句大全
    mysql安装及使用语句
    ubuntu安装mysql数据库
    android数据库sqlite增加删改查
    ubuntu 15.04怎么安装QQ
    Tagging Physical Resources in a Cloud Computing Environment
    程序员的10大编程技巧
  • 原文地址:https://www.cnblogs.com/alantao/p/6520596.html
Copyright © 2011-2022 走看看