利用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>

实现效果：