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="data:images/load_03.png" alt="">
          </div>
      </div>
      <div class="percentage">
        <span class="num"></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: ;
    position: absolute;
    top: ;
    left: ;
    width: %;
    height: %;
    background: #fff;
}

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

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

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

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

.preload .prezoom .outer-circle {
    width: 140px;
    height: 140px;
    margin: -70px;
    opacity: .;
    z-index: ;
    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: %;
    margin-top: 60pt;
}

.preload .mark,.preload .percentage {
    position: absolute;
    width: %;
    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 = ; 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 = ;
                while (imgs.length) {
                    loadImage(imgs.shift(), function (path) {
                        callback(path, ++i, len);
                    })
                }
            }
            var percent = ;
            imgLoader(imgSources, function (path, curNum, total) {
                percent = parseInt(curNum / total*) ;
                $(".percentage .num").html(percent);
                var dega = percent *3.6;
                 >= dega && dega >=  ? $(".pie1").css({transform: "rotate(" + dega + "deg)"}) :  >= dega && dega >  && ($(".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 == ) {
                    setTimeout(function () {
                      $('.preload').animate({
                        opacity:
                    }, , function() {
                        $(this).remove();
                        $(".contentcon").css("display","block");
                        $(".u-globalAudio").css("display","block");
                    })
                    }, );
                }
            });
            })();//end

    }