前言

一個網站要讓他更完整，勢必就需要當使用者進入網站時，先進行讀取，但由於技術成分不足，只好先做這種簡單版的

一、載入JQuery

請先複製下列程式碼，並貼在body的最底下

<!-- jQuery Plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

二、找一張GIF的圖

找一張GIF的圖，並命名為loading.gif
https://img.pikbest.com/58pic/35/39/61/62K58PICb88i68HEwVnm5_PIC2018.gif!w340
(懶得找的，就用上面這個吧!!)

三、新增兩個 Div

一個 Div 是用來覆蓋整個螢幕的，讓使用者不會看到後面的內容
一個 Div 是用來放 .gif 的

<div id="preloader">
  <div id="status"><img src="loading.gif"/></div>
</div>

四、設定CSS樣式

#preloader {/*   這是整個會蓋住畫面的底色色塊  */
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  background-color: #fff;
  z-index: 9999;
}
#status {/*   這是中間loading的gif坐標css,我們盡量讓他畫面置中  */
  position: fixed;
  width: 218px;
  height: 419px;
  margin-left: -140px;
  margin-top: -160px;
  left: 50%;
  top: 50%;
}

五、JQuery -- $(window).load(function()){}

$(window).load(function() { // 確認整個頁面讀取完畢再將這三個div隱藏起來
    $("#status").delay(5000).fadeOut(3000); //delay --> 延遲幾秒才fadeOut
    $("#preloader").delay(7000).fadeOut(3000);
})

想知道更詳細的可以點選下方網址
https://www.w3school.com.cn/jquery/jquery_fade.asp

這樣一個簡單的loading畫面就完成啦
雖然鐵人賽已經結束了，但我還是回來把他補齊了!!希望對新手有幫助!!