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


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

说明

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

原理

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

实现

需先引入: jquery

HTML部分:

<div class="loading-div">
      <img src="https://www.kljs6.com/img/loading.gif"/>
  </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 年 05 月 15 日
如果觉得我的文章对你有用,请随意赞赏