JS判斷頁面載入狀態以及新增遮罩和緩衝動畫的程式碼_javascript技巧

複製程式碼 程式碼如下:

function initialize() {
為addcloud();頁面新增遮罩
document.onreadystatechange = subSomething; //監聽載入狀態改變
}
function addcloud() {
var bodyWidth = document.documentElement.Pidvars; .max(document.documentElement.clientHeight, document.body.scrollHeight);
var bgObj = document.createElement("div" );
bgObj.setAttribute( 'id', 'bgDiv'); bgObj.style.position = "absolute";
bgObj.style.top = "0";
bgObj.style.background = "#000000";
bgObj.style.filter = "progid:DXImageTransform .Microsoft.Alpha(style=3,opacity=25,finishOpacity=75" ;
bgObj.style.opacity = "0.5";
bgObj.style.left = "0";
stylebgObj. .width = bodyWidth "px";
bgObj.style.height = bodyHeight "px";
bgObj.style.zIndex = "10000"; //設定它的zindex屬性，讓這個divz軸上最大，使用者點擊頁面任何東西都不會有反應|
document.body.appendChild(bgObj); //新增遮罩
var loadingObj = document.createElement("div");
loadingObj.setAttribute ( 'id', 'loadingDiv' );
loadingObj.style.position = "absolute";
loadingObj.style.top = bodyHeight / 2 - 32 "px";
loadingObj.style.left = bodyWidth / 2 "px";
loadingObj.style.background = "url(../img/loading.gif)" ;
loadingObj.style.width = "32px";
loadingObj.style. height = "32px";
loadingObj.style.zIndex = "10000";
document.body.appendChild(loadingObj); //新增loading動畫-
}
function remcloud( 🎜>$( "#loadingDiv").remove();
$( "#bgDiv").remove();
}
function subSomething() {
if (document.readyState = = "complete" ) //當頁面載入完畢移除頁面遮罩，移除loading動畫-
{
removecloud();
}
}