JS實現頁面加載完畢以前loading提示效果

jQuery.MyCommon = {
    PageLoading: function (options) {
        var defaults = {
            opacity: 0.7,
            //loading頁面透明度
            backgroundColor: "#3d3d3d",
            //loading頁面背景色
            borderColor: "#bbb",
            //提示邊框顏色
            borderWidth: 0,
            //提示邊框寬度
            borderStyle: "solid",
            //提示邊框樣式
            loadingTips: "",
            //提示文本
            TipsColor: "#666",
            //提示顏色
            delayTime: 1000,
            //頁面加載完成後，加載頁面漸出速度
            zindex: 99999999,
            //loading頁面層次
            sleep: 0
            //設置掛起,等於0時則無需掛起

        }
        var options = $.extend(defaults, options);

        //獲取頁面寬高
        var _PageHeight = document.documentElement.clientHeight,
        _PageWidth = document.documentElement.clientWidth;

        //在頁面未加載完畢以前顯示的loading Html自定義內容
        var _LoadingHtml = '<div id="loadingPage" style="position:fixed;left:0;top:0;width:100%;height:100%;background:' + options.backgroundColor + ';opacity:' + options.opacity + ';filter:alpha(opacity=' + options.opacity * 100 + ');z-index:' + options.zindex + ';"><div id="loadingTips" style="position: absolute; cursor1: wait; width: 100%;border-color:' + options.borderColor + ';border-style:' + options.borderStyle + ';border-width:' + options.borderWidth + 'px; height:300px; line-height:80px; border-radius:10px;  background: ' + options.backgroundColor + ' url(../images/loading.gif) no-repeat center center; color:' + options.TipsColor + ';font-size:20px;">' + options.loadingTips + '</div></div>';

        //呈現loading效果
        $("body").append(_LoadingHtml);

        //獲取loading提示框寬高
        var _LoadingTipsH = document.getElementById("loadingTips").clientHeight,
        _LoadingTipsW = document.getElementById("loadingTips").clientWidth;

        //計算距離，讓loading提示框保持在屏幕上下左右居中
        var _LoadingTop = _PageHeight > _LoadingTipsH ? (_PageHeight - _LoadingTipsH) / 2 : 0,
        _LoadingLeft = _PageWidth > _LoadingTipsW ? (_PageWidth - _LoadingTipsW) / 2 : 0;

        $("#loadingTips").css({
            "left": _LoadingLeft + "px",
            "top": _LoadingTop + "px"
        });

        //監聽頁面加載狀態
        document.onreadystatechange = PageLoaded;

        //當頁面加載完成後執行
        function PageLoaded() {
            if (document.readyState == "complete") {
                var loadingMask = $('#loadingPage');

                setTimeout(function () {
                    loadingMask.animate({
                        "opacity": 0
                    },
                    options.delayTime,
                    function () {
                        $(this).hide();

                    });

                },
                options.sleep);

            }
        }
    },removeLoading:function(){
    	$('#loadingPage').remove();
    }
}