頁面加載完成前的loading加載效果

/*loading.js*/

// 加載HTML圖

var _LoadingHtml = '<div id="loadingDiv" style="position:fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 99999;"><div style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);"><img src="./load.gif" style="vertical-align: middle;width: 100px;"></div></div>';

 

// 呈現loading效果

document.write(_LoadingHtml);

 

// 監聽加載狀態改變

document.onreadystatechange = completeLoading;

 

// 加載狀態為complete時移除loading效果

function completeLoading() {

　　if (document.readyState == "complete") {

　　　　var loadingMask = document.getElementById('loadingDiv');

　　　　loadingMask.parentNode.removeChild(loadingMask);

　　}

}

留作筆記，親測可用~