博客

效果：

进入网页时先出现加载动画，加载完毕后显示网页

实现原理：

在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">