ant-design/site/static/homeLoad.js

/**
 * Created by jljsj on 15/6/3.
 */
$(function () {
    var loadData = ["/static/easeljs-0.8.0.min.js", "/static/TweenMax.min.js", "/static/home.js", "https://t.alipayobjects.com/images/T1CFtgXb0jXXXXXXXX.jpg"];
    var animEndStr = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    var loadFunc={
        init:function(){
            var self=this;
            self.body=$("body");
            self.header=$("#header")||$("header");
            self.main=$(".main");
            self.footer=$("#footer")||$("footer");
            self.addLoad()
        },
        addLoad:function (){
            var self=this;
            self.loadBox=$("<div class='load-main-box'>" +
            "<div class='load-box'>" +
            "<em><img src='https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg' width='50' height='50'></em>" +
            "<span>Ant Design</span>" +
            "</div>" +
            "<div class='load-bar'></div>" +
            "</div>").appendTo(".banner-box");
            self.loadBar=self.loadBox.find(".load-bar");
            var loadText=self.loadBox.find("span"),
                str=loadText.text(),
                loadClass=["yoyo-load0","yoyo-load1","yoyo-load2","yoyo-load3","yoyo-load4","yoyo-load5"];
            loadText.empty();
            function c_random(num,arrlen){
                var arr=[];
                function r(i){
                    var t=Math.round(Math.random()*(num-1));
                    if(t==arr[i-1]){
                        r(i);
                        return
                    }
                    arr.push(t)
                }
                for(var i=0;i<arrlen;i++){
                    r(i)
                }
                return arr;
            }
            var tarr=c_random(loadClass.length,str.length);
            for(var i=0;i<str.length;i++){
                var t=str[i];
                if(t==" "){
                    t="&nbsp;"
                }
                var _class="yoyo-x-left";
                if(i>0&&i<str.length-1){
                    _class=loadClass[tarr[i]]
                }
                if(i==str.length-1){
                    _class='yoyo-x-right'
                }
                loadText.append("<p class='"+_class+"'>"+t+"</p>")
            }
            self.load()
        },
        load:function (){
            var self=this,num= 0;
            function endLoad(){
                self.loadBox.addClass("load-out").one(animEndStr, function () {
                    self.loadBox.remove();
                    bannerAnim.init();
                });
            }
            function getLoad(){
                var str=loadData[num];
                if(str.indexOf(".js")>=0){
                    $.getScript(rootUrl + str,function (){
                        num++;
                        self.loadBar.css("width",num/loadData.length*100+"%");
                        if(num>=loadData.length){
                            setTimeout(endLoad,300);
                        }else{
                            getLoad();
                        }
                    })

                }else{
                    var img = new Image();
                    img.onload = img.onerror = function () {
                        num++;
                        self.loadBar.css("width",num/loadData.length*100+"%");
                        if (num >= loadData.length) {
                            setTimeout(endLoad,300);
                        }else{
                            getLoad();
                        }
                    };
                    img.src = str;
                }
            }
            getLoad();
        }
    };
    $().ready(function (){
        loadFunc.init()
    });

});