【HTML】簡單實現網頁加載動畫

效果：

進入網頁時先出現加載動畫，加載完畢后顯示網頁

實現原理：

在html上方放一個div，用來顯示加載動畫，js判斷加載完畢事件，將div隱藏即可。

知識點整理：

偽元素實現垂直居中、awesome字體動畫、js判斷HTML加載是否完成

代碼：

css:

body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .loading-div {
      width: 1800px;
      height: 720px;
      background-color: #fff;
      display: table-cell;
      vertical-align: middle;
      color: #555;
      overflow: hidden;
      text-align: center;
    }
    .loading-div::before {
      display: inline-block;
      vertical-align: middle;
    } 

html

<div class="loading-div">
      <i class="fa fa-spinner fa-pulse fa-3x fa-fw "></i>
      <span class="sr-only">Loading...</span>
  </div>
  <div class="main">
    這里是網頁內容
  </div>

js

//注釋部分是設置2秒的定時延遲，timeout結束后加載網頁
      //setTimeout(() => {
        // $(".loading-div").hide();
        //$('body').css('overflow-y','scroll');
     // }, 2000);
//這是根據js判斷，頁面加載完畢就顯示
document.onreadystatechange = function () {
    if (document.readyState == "complete") {    
        $(".loading-div").hide();
        $('body').css('overflow','scroll');
    }
  }

在線引用文件：

<script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" rel="stylesheet">