페이지 로딩 상태를 확인하고 마스크 및 버퍼 animation_javascript 기술을 추가하는 JS 코드

코드 복사 코드는 다음과 같습니다.

function 초기화() {
addcloud(); // is 페이지에 마스크 추가
document.onreadystatechange = subSomething; //로딩 상태 변경 듣기
}
function addcloud() {
var bodyWidth = document.documentElement.clientWidth;
var bodyHeight = Math .max(document.documentElement.clientHeight, document.body.scrollHeight);
var bgObj = document.createElement("div" )
bgObj.setAttribute( 'id', ' bgDiv' );
bgObj.style.position = "절대";
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"; 이 div는 z축에서 가장 크므로 사용자가 페이지의 아무 항목을 클릭해도 응답이 없습니다.
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); 🎜>}
function Removecloud() {
$( "#loadingDiv").remove()
$( "#bgDiv").remove(); () {
if (document.readyState = = "complete" ) //페이지가 로드되면 페이지 마스크를 제거하고 로딩 애니메이션을 제거합니다. -
{
removecloud()
}
}