前言

一个网站要让他更完整，势必就需要当使用者进入网站时，先进行读取，但由於技术成分不足，只好先做这种简单版的

一、载入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画面就完成啦
虽然铁人赛已经结束了，但我还是回来把他补齐了!!希望对新手有帮助!!