原生JavaScript实现进度条

  

下面是“原生JavaScript实现进度条”的完整攻略，包括实现过程、代码示例和具体讲解。

1. 实现过程

1.1 顶部进度条

实现顶部进度条的关键是获取当前页面的加载进度，并将其转化为进度条的宽度并实时更新，下面是代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>原生JavaScript实现进度条 - 顶部进度条</title>
  <style>
    .progressbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 0;
      height: 3px;
      background-color: #29d;
      transition: width .3s ease;
    }
  </style>
</head>
<body>
  <div class="progressbar"></div>
  <script>
    window.addEventListener('load', function() {
      var progressbar = document.querySelector('.progressbar');
      progressbar.style.width = '100%';
      setTimeout(function() {
        progressbar.style.opacity = '0';
        setTimeout(function() {
          progressbar.style.display = 'none';
        }, 300);
      }, 1000);
    });
  </script>
</body>
</html>

在页面加载完成后，我们使用window.addEventListener('load', callback)的方式监听页面加载事件。在callback函数中，首先获取到进度条的DOM元素，然后将其宽度设置为100%，使其充满屏幕。

接下来，我们使用setTimeout方法给进度条添加一个淡出效果，并在淡出完成后隐藏进度条。

1.2 页面中的进度条

实现页面中的进度条比较麻烦，需要通过监听XHR请求的状态来实现进度条的更新和控制。下面是代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>原生JavaScript实现进度条 - 页面中的进度条</title>
  <style>
    .progressbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 0;
      height: 3px;
      background-color: #29d;
      transition: width .3s ease;
    }
    .loading {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="progressbar"></div>
  <div class="loading">加载中...</div>
  <script>
    var progressbar = document.querySelector('.progressbar');
    var loading = document.querySelector('.loading');
    var totalTime = 0;
    var startTime = 0;

    function startLoading() {
      loading.style.display = 'block';
      startTime = Date.now();
    }

    function finishLoading() {
      loading.style.opacity = '0';
      setTimeout(function() {
        loading.style.display = 'none';
      }, 300);
    }

    function updateProgress() {
      var currentTime = Date.now();
      var progress = Math.min((currentTime - startTime) / totalTime, 1);
      progressbar.style.width = progress * 100 + '%';
      if (progress < 1) {
        requestAnimationFrame(updateProgress);
      }
    }

    function hookXHR() {
      var open = XMLHttpRequest.prototype.open;
      var send = XMLHttpRequest.prototype.send;
      var isXHRInitializing = true;

      XMLHttpRequest.prototype.open = function() {
        this.startTime = Date.now();
        open.apply(this, arguments);
      }

      XMLHttpRequest.prototype.send = function() {
        totalTime = this.timeout || 5000;
        if (isXHRInitializing) {
          isXHRInitializing = false;
          hookXHR();
          startLoading();
          requestAnimationFrame(updateProgress);
        }
        send.apply(this, arguments);
        var self = this;
        this.addEventListener('loadend', function() {
          finishLoading();
          isXHRInitializing = true;
        })
      }
    }

    hookXHR();
  </script>
</body>
</html>

首先，我们通过XMLHttpRequest的原型方法open和send来监听XHR请求的状态。在open方法中，我们获取到请求开始的时间戳，并在send方法中计算请求的总耗时，并将其保存到全局变量totalTime中。

在第一次XHR请求时，我们开始显示加载中的提示，并使用requestAnimationFrame方法来不断更新进度条的宽度。在每次更新时，我们计算当前进度的百分比，然后根据百分比设置进度条的宽度。

在XHR请求完成时，我们将加载中的提示淡出，并在淡出完成时隐藏。

2. 总结

通过以上代码示例和实现过程的讲解，我们可以知道实现进度条的关键在于监听XHR请求的状态，并将请求的耗时转化为进度条的宽度并进行实时更新。此外，我们还需要注意淡入淡出效果的实现，以及在进度条更新时如何避免浏览器卡顿的问题。

相关文章
前端开发最新文章
热门教程