简单实现网页加载动画

js 同时被 2 个专栏收录
2 篇文章 0 订阅
2 篇文章 0 订阅

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

效果:

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

实现原理:

在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" >
Github下载demo:

https://github.com/huxinxue/demo/blob/master/简单网页加载动画demo.rar

  • 8
    点赞
  • 1
    评论
  • 38
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值