載入中loading畫面，主要是因為資料在戴入時如果畫面因為資料還沒有戴完全，畫面會定格或是空白，為了使使用者了解讀取進度與狀態，也需要此方式來操作，正因為如此，找到了幾個方式來測試使用。
第一種
照著說明，不過好像沒有成功，不知出錯是在那裡。
See the Pen 常見的載入中loading頁面效果-第一種 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
js bin展示開新視窗
第二種
就是利用一個百分比來連續加入一組「」字符串，然後達到 100% 之後執行一次 self.location.href 跳轉。這種辦法跳轉過去再次讀取頁面而這個效果也就起不到任何預載入的功能,只能說是以假亂真罷了。
See the Pen 常見的載入中loading頁面效果-第二種 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
js bin展示開新視窗
第三種
利用DOM模型的document.all 來 document.layers這兩個對象來做判斷頁面是否加載完畢從而實現層的現實和隱藏。
順便說明下document.all 和 document.layers。
- document.all是IE瀏覽器所具有的對象集合，一般用if(document.all)來判斷是否是IE瀏覽器,這個集合代表document對象下所有元素；
- document.layers是網景Netscape瀏覽器所具有的對象集合,這個集合代表document對象下所有的layer(層)。
See the Pen 常見的載入中loading頁面效果-第三種 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
js bin展示開新視窗
第四種
利用window.onload 是在頁面完全讀取完畢才執行的特性
- 緊跟 <body> 標籤的下面一行，這樣才能確保在讀頁面的時候最先顯示這一層。
- window.onload = initPage(); nitPage 其實就是最先我不說明用途的那個 initPage() 函數，其實就是關閉 LoadingBar 層的一個過程。
See the Pen 常見的載入中loading頁面效果-第四種 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
js bin展示開新視窗