1. 通過加載狀態事件制作進度條：

知識點：

　　 document.onreadystatechange //頁面加載狀態改變時的事件
    document.readyState  //返回當前文檔的狀態
    uninitialized - 還未開始載入
    loading - 載入中
    interactive - 已加載，文檔與用戶可以開始交互
    complete - 載入完成

document.onreadystatechange = function () {
        console.log(document.readyState);
    }

查看網頁控制臺，可以看出，已經返回當前文檔的狀態：

常見的加載進度條，如果不需要顯示加載加載進度百分比，那麽，直接執行一個進度條動畫消失的任務即可：

 document.onreadystatechange = function () {
        if(document.readyState === "complete"){
            //....要執行的任務，比如進度條動畫結束fadeOut:
            $(‘.loading‘).fadeOut();
        }
    }

推薦一個一不小心就會沈迷在裏面的網站：https://loading.io/ 可在這裏挑選進度條小動畫，還有純html+css寫成的進度條動畫。

JavaScript 常用進度條