h5预加载代码

 

 

 

预加载

<!--预加载-->
    <div class="preload">
        <div class="prezoom">
          <div class="outer-circle"></div>
          <div class="inner-circle"></div>
      </div>
      <div class="load">
          <div class="pie1"></div>
          <div class="pie2"></div>
          <div class="thumb">
            <img src="images/load_03.png" alt="">
          </div>
      </div>
      <div class="percentage">
        <span class="num">0</span>%
      </div>
    </div>

css:

@keyframes outer-circle {
0% {
transform: scale(1)
}

50% {
transform: scale(.8)
}

100%{
transform: scale(1)
}
}

@-webkit-keyframes outer-circle {
0% {
-webkit-transform: scale(1)
}

50% {
-webkit-transform: scale(.8)
}

100% {
-webkit-transform: scale(1)
}
}

 

.preload {
    z-index: 1999;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff; 
}

.preload .load .thumb {
   position: absolute;
    margin: -45px;
    overflow: hidden;
    left: 50%;
    top: 30%;
    background-color: #fff;
    z-index: 1999
}
.preload .load{ opacity: 0; animation: fadeInNormal 1000ms ease 600ms both running;}
.preload .load .thumb ,.preload .load .thumb img {
     width: 90px;
    height: 90px;
    border-radius: 90px;z-index: 9;
    animation: zoomIn 1000ms ease both running;
}
.preload .load .pie1,.preload .load .pie2 {
     z-index: 2;
    position: absolute;
    width: 110px;
    height: 110px;
    margin: -55px;
    clip: rect(0,55px,110px,0);
    border-radius: 110px;
    left: 50%;
    top: 30%;
    border: none;
     opacity: 0.5;
    animation: fadeInNormal 1000ms ease both running;
}

.preload .load .pie1 {
    background: #172b7d;
    z-index: 7
}

.preload .load .pie2 {
    background:#fff;
    z-index:8
}
.preload .prezoom .inner-circle,.preload .prezoom .outer-circle {
    position: absolute;
    border-radius: 140px;
    background: #afe4dd;
    left: 50%;
    top: 30%
}

.preload .prezoom .inner-circle {
    width: 30px;
    height: 30px;
    margin: -15px
}

.preload .prezoom .outer-circle {
    width: 140px;
    height: 140px;
    margin: -70px;
    opacity: .3;
    z-index: 2;
    animation: outer-circle 2s infinite;
    -moz-animation: outer-circle 2s infinite;
    -webkit-animation: outer-circle 2s infinite;
    -o-animation: outer-circle 2s infinite
}
.preload .percentage {
    top: 30%;
    margin-top: 60pt;
}

.preload .mark,.preload .percentage {
    position: absolute;
    width: 100%;
    height: 10px;
    font-size: 10px;
    text-align: center;
    color: #b4b4b4
}

js

function loadImg(){
        var imgPath ='http://www.calc.com.hk/Cards/HRshow/images/';
    var loadingPage = (function () {
            var imgSources = ['bj.jpg','conbj.jpg', 'load_03.png', 'arr.png', 'page01_03.png', 'page01_07.png', 'page3pic_03.png', 'page3pic_07.png', 'page04_03.png', 'Touch4.png'];
            for (var i = 0; i < imgSources.length; i++) {
                imgSources[i] = (imgPath + imgSources[i]);
            };
            
            var loadImage = function (path, callback) {
                var img = new Image();
                img.onload = function () {
                    img.onload = null;
                    callback(path);
                }
                img.src = path;
            }

            var imgLoader = function (imgs, callback) {
                var len = imgs.length, i = 0;
                while (imgs.length) {
                    loadImage(imgs.shift(), function (path) {
                        callback(path, ++i, len);
                    })
                }
            }
            var percent = 0;
            imgLoader(imgSources, function (path, curNum, total) {
                percent = parseInt(curNum / total*100) ;
                $(".percentage .num").html(percent);
                var dega = percent *3.6; 
                180 >= dega && dega >= 0 ? $(".pie1").css({transform: "rotate(" + dega + "deg)"}) : 360 >= dega && dega > 180 && ($(".pie1").css({
                    transform: "rotate(180deg)"
                    }), $(".pie2").css({
                        "border-radius": "155px",
                        background: "rgba(23, 43, 125, 1)",
                    transform: "rotate(" + dega + "deg)"
                    })), $(".percentage").find(".num").html();
                
                if (percent == 100) {
                    setTimeout(function () {  
                      $('.preload').animate({
                        opacity: 0
                    }, 1000, function() {
                        $(this).remove();
                        $(".contentcon").css("display","block");
                        $(".u-globalAudio").css("display","block");
                    })
                    }, 0);
                }
            });
            })();//end
    

    }