JS判断页面加载状态以及添加遮罩和缓冲动画的代码

时间：2023-12-08

JS判断页面加载状态以及添加遮罩和缓冲动画的代码是前端开发中常见的需求。以下为完整攻略。

判断页面加载状态

判断页面的加载状态可以使用window对象的load和DOMContentLoaded事件。需要注意的是，load事件会在页面的所有资源（包括图片、音频、视频等）都加载完成后才触发，而DOMContentLoaded事件则是在页面DOM结构加载完成后就会触发，不会等待资源的加载完成。

使用load事件

window.addEventListener('load', function() {
  // 页面所有资源已完成加载，可以执行相应代码
});

使用DOMContentLoaded事件

document.addEventListener('DOMContentLoaded', function() {
  // DOM结构已经加载完成，可以执行相应代码
});

添加遮罩和缓冲动画

在页面加载时添加遮罩和缓冲动画可以给用户一个友好的体验。以下是一个简单的示例，在页面加载时添加遮罩和缓冲动画：

<!DOCTYPE html>
<html>
<head>
  <title>页面加载示例</title>
  <style>
    #loading-mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.5);
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #loading-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #ccc;
      border-left-color: #555;
      border-radius: 50%;
      animation: rotate 1s infinite linear;
    }
    @keyframes rotate {
      to {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div id="loading-mask">
    <div id="loading-spinner"></div>
  </div>
  <script>
    window.addEventListener('load', function() {
      // 页面所有资源已完成加载，将遮罩和缓冲动画隐藏
      var mask = document.getElementById('loading-mask');
      var spinner = document.getElementById('loading-spinner');
      mask.style.display = 'none';
      spinner.style.display = 'none';
    });
  </script>
</body>
</html>

在页面上添加了一个半透明的遮罩层，并在遮罩层中心位置添加了一个旋转的缓冲动画。页面加载完成后，通过JS修改遮罩层和缓冲动画的display属性，从而将它们隐藏起来。

另外一个示例是在ajax请求时添加遮罩和缓冲动画，代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>AJAX请求示例</title>
  <style>
    #loading-mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.5);
      z-index: 9999;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #loading-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #ccc;
      border-left-color: #555;
      border-radius: 50%;
      animation: rotate 1s infinite linear;
    }
    @keyframes rotate {
      to {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div id="loading-mask">
    <div id="loading-spinner"></div>
  </div>
  <button id="ajax-button">发起AJAX请求</button>
  <script>
    var mask = document.getElementById('loading-mask');
    var spinner = document.getElementById('loading-spinner');
    var ajaxButton = document.getElementById('ajax-button');

    ajaxButton.addEventListener('click', function() {
      // 在ajax请求开始前显示遮罩和缓冲动画
      mask.style.display = 'flex';
      spinner.style.display = 'block';

      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          // AJAX请求完成后隐藏遮罩和缓冲动画
          mask.style.display = 'none';
          spinner.style.display = 'none';
        }
      };
      xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
      xhr.send();
    });
  </script>
</body>
</html>

在这个示例中，点击按钮后会发起一个异步的ajax请求，在ajax请求开始前显示遮罩和缓冲动画，在ajax请求完成后隐藏遮罩和缓冲动画。

上一篇：JavaScript变量声明var,let.const及区别浅析 下一篇：深入理解JavaScript系列(2) 揭秘命名函数表达式

JS判断页面加载状态以及添加遮罩和缓冲动画的代码

判断页面加载状态

使用load事件

使用DOMContentLoaded事件

添加遮罩和缓冲动画

相关文章