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能夠隨你們本身改變作出更加炫麗的動畫