JS实现给网站添加加载动画

岳泽以

发布于 2022-10-26 17:12:30

6.9K0

发布于 2022-10-26 17:12:30

文章被收录于专栏：岳泽以博客

说明

当进入网页时会先出现加载动画，当整个网页完全加载完毕后再显示正常网页。

原理

在html上方先放一个div，用来显示加载动画，然后js判断当网页加载完毕后再将这个div隐藏并显示原网页。

实现

需先引入：jquery

HTML部分：

<div class="loading-div">
      <img src="https://pic.zeyiwl.cn/yunimg/20220418203424.jpg"/>
  </div>
  <div class="main">
    这里是网页内容
  </div>

CSS部分：

body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .loading-div {
      width: 100vh;
      height: 100vh;
      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;
    }

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');
    }
  }

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022 年 04 月，如有侵权请联系 cloudcommunity@tencent.com 删除

html