简单实现网页加载动画

最新推荐文章于 2025-06-30 09:10:09 发布

huxinxue

最新推荐文章于 2025-06-30 09:10:09 发布

阅读量1.2w

点赞数 10

CC 4.0 BY-SA版权

分类专栏： js 综合运用文章标签：网页加载动画垂直居中

本文链接：https://blog.youkuaiyun.com/huxinxue/article/details/88822768

js 同时被 2 个专栏收录

2 篇文章

订阅专栏

综合运用

2 篇文章

订阅专栏

本文记录了如何创建一个网页加载动画，在页面完全加载前显示，加载完成后自动消失。实现方法包括在HTML顶部放置一个显示动画的div，并通过JavaScript监听页面加载事件来隐藏该div。涉及到的技术点包括伪元素实现的垂直居中、Awesome字体动画以及JavaScript的DOM加载检测。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天自己实现了这个功能，记录一下

效果：

进入网页时先出现加载动画，加载完毕后显示网页
在这里插入图片描述

实现原理：

在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://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" >