效果：

進(jìn)入網(wǎng)頁(yè)時(shí)先出現(xiàn)加載動(dòng)畫(huà)，加載完畢后顯示網(wǎng)頁(yè)

實(shí)現(xiàn)原理：

在html上方放一個(gè)div，用來(lái)顯示加載動(dòng)畫(huà)，js判斷加載完畢事件，將div隱藏即可。

知識(shí)點(diǎn)整理：

偽元素實(shí)現(xiàn)垂直居中、awesome字體動(dòng)畫(huà)、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">
    這里是網(wǎng)頁(yè)內(nèi)容
  </div>

js

//注釋部分是設(shè)置2秒的定時(shí)延遲，timeout結(jié)束后加載網(wǎng)頁(yè)
      //setTimeout(() => {
        // $(".loading-div").hide();
        //$('body').css('overflow-y','scroll');
     // }, 2000);
//這是根據(jù)js判斷，頁(yè)面加載完畢就顯示
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  rel="stylesheet">

總結(jié)

以上是生活随笔為你收集整理的【HTML】简单实现网页加载动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。