js實現頁面加載完畢之前loading提示效果

最近做項目遇見一個問題就是大的頁面打開很慢，頁面空白處太多，很影響客戶體驗，於是想着在頁面加載的時候頁面不要顯示空白

於是用js實現了以下的內容 loading效果

//在頁面未加載完畢之前顯示的loading Html自定義內容

var _LoadingHtml = '頁面加載中，請等待...';

//呈現loading效果

document.write(_LoadingHtml);

//監聽加載狀態改變
document.onreadystatechange = completeLoading;

//加載狀態為complete時移除loading效果
function completeLoading() {
    if (document.readyState == "complete") {
        var loadingMask = document.getElementById('loadingDiv');
        loadingMask.parentNode.removeChild(loadingMask);
    }
}

其中_LoadingHtml可以隨大家自己改變做出更加炫麗的動畫