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

2023年6月10日下午11:33 • JavaScript

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请求完成后隐藏遮罩和缓冲动画。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS判断页面加载状态以及添加遮罩和缓冲动画的代码 - Python技术站