利用document的readyState去實現頁面加載中的效果

 打開新的網頁時，爲了加強友好性體驗，告知用戶網頁正在加載數據須要呈現一個「頁面加載中」之類的提示，只須要利用document就能夠實現。

實現示例代碼以下：

<style>
    .loading_background { cursor: wait; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.5); position: absolute; top: 0; left: 0; z-index: 700; }
    #loading_manage { color: #666; font-size: 20px; position: absolute; z-index: 10001; left: 45%; top: 40%; border: 1px solid rgb(187, 187, 187); width: auto; height: 80px; line-height: 78px; padding-left: 16px; padding-right: 20px; background: #fff; display: none; cursor: pointer; border-radius: 8px; background-repeat: no-repeat; background-position: 8px 50%; box-shadow: 0 1px 15px rgba(0,0,0,.175); }
    #loading_manage i { font-size: 24px; }
</style>
<iframe src="http://www.google.com"></iframe>
<div id="loading_background" class="loading_background" style="display: none;"></div>
<div id="loading_manage">
    <i class="fa fa-spinner fa-spin animated"></i> 正在爲您玩命加載中…
</div>

js代碼：

<script>

    document.onreadystatechange = documentReadyState;
    loading();
    //頁面狀態處理
    function documentReadyState() {
        if (document.readyState == "complete") {
            completed();
        }
    }

    //加載中顯示遮罩
    function loading() {
        $('#loading_background').show();
        $('#loading_manage').show();
        return;
    }
    //加載完成，隱藏遮罩
    function completed() {
        $('#loading_background').hide();
        $('#loading_manage').hide();
    }
</script>

實現效果：