打开新的网页时，为了增强友好性体验，告知用户网页正在加载数据需要呈现一个“页面加载中”之类的提示，只需要利用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>
实现效果：