js页面加载时页面遮罩层的开发与编写

js页面加载时页面遮罩层的开发与编写

    
    

        

        
    

.pageloading {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 20000
}

    .pageloading .loader-inner {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 60px;
        height: 60px;
        vertical-align: middle;
        background: url('images/loading_80x80.gif') no-repeat center center;
        background-size: cover;
    }

.pageloadingright {
    display: none;
    position: fixed;
    right: 0;
    width: 20px;
    height: 20px;
    z-index: 10000;
    background: url('images/loading_32x32.gif') no-repeat center center;
    background-size: cover;
}

 (function (window, $, undefined) {     
 var _Core = function () {
  var _loading = function () {
            this.AjaxLoadingStart = function () {
                $("#pageloadingright").fadeIn();
            };

            this.HideAjaxLoading = function () {
                $("#pageloadingright").fadeOut(500);
            };

            this.HidePageLoading = function () {
                $("#pageloading").fadeOut(500);
            }

            this.HideAll = function () {
                this.HideAjaxLoading();
                this.HidePageLoading();
            }

        };
        this.Loading = new _loading();
        /**
         * 页面所有ajax加在完毕后执行
         * @param {function()} func 回调函数
         */
        this.OnPageLoad = function (func) {
            if (func !== undefined)
                _OnPageLoad = func;
        };

        var pageLoad = function () {
            if (_OnPageLoad)
                _OnPageLoad();
        };
        $(function () {
            var _interval = setInterval(function () {
                //if
                if (!window.ajaxruning) {
                    clearInterval(_interval);
                    pageLoad();
                }
            }, 100);
            $Core.ValidPage();
            $Core.ValidAction();

        });
    };
    window.$Core = new _Core();

})(window, jQuery);

        $Core.OnPageLoad(function () {
            $Core.Loading.HidePageLoading();
        });