Javascript code for judging page loading status and adding masks and buffering animations _ javascript skills

JS judges the page loading status and adds the code for masks and buffering animations. paste the Code directly! Annotated The Code is as follows:

Function initialize (){
Addcloud (); // adds a mask to the page
Document. onreadystatechange = subSomething; // listen for loading status changes
}
Function addcloud (){
Var bodyWidth = document.doc umentElement. clientWidth;
Var bodyHeight = Math.max(document.doc umentElement. clientHeight, document. body. scrollHeight );
Var bgObj = document. createElement ("p ");
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 ";
BgObj. style. width = bodyWidth + "px ";
BgObj. style. height = bodyHeight + "px ";
BgObj. style. zIndex = "10000"; // set the zindex attribute of the p to the maximum value on the Z axis. No response is returned when you click anything on the page. |
Document. body. appendChild (bgObj); // adds a mask.
Var loadingObj = document. createElement ("p ");
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); // Add the loading animation-
}
Function removecloud (){
$ ("# LoadingDiv"). remove ();
$ ("# BgDiv"). remove ();
}
Function subSomething (){
If (document. readyState = "complete") // After the page is loaded, remove the page mask and the loading animation-
{
Removecloud ();
}
}