如何实现网页加载进度条

基于HTML5和JavaScript的简单进度条实现

• 原理：利用window.onload事件和document.readyState属性来跟踪页面加载进度。document.readyState有不同的状态值，如loading（正在加载）、interactive（文档已被解析，“交互时间”开始）和complete（文档和所有子资源已完成加载）。
• 实现步骤：
  • 首先，在HTML页面中创建一个进度条元素。可以使用<div>标签来表示进度条，例如：

  <div id="progressBar"></div>
  

  • 然后，在CSS中设置进度条的样式，包括宽度、高度、背景颜色等。例如：

  #progressBar {
    width: 0%;
    height: 20px;
    background - color: #3498db;
  }
  

  • 最后，在JavaScript中实现进度条的更新逻辑。例如：

  window.onload = function () {
    var progressBar = document.getElementById('progressBar');
    progressBar.style.width = '100%';
  };
  window.addEventListener('DOMContentLoaded', function () {
    var progressBar = document.getElementById('progressBar');
    progressBar.style.width = '50%';
  });
  

• 优点：简单易懂，不需要引入额外的库，与HTML和JavaScript的原生知识紧密结合。
• 缺点：这种方式只能提供大致的加载进度，对于更详细的资源加载（如图片、脚本等）的进度显示不够精确。

使用Ajax加载部分页面内容时的进度条

• 原理：当使用Ajax技术加载页面内容时，可以通过XMLHttpRequest对象的progress事件来获取数据加载的进度。这个事件会在数据传输过程中不断触发，提供已传输的数据量和总数据量等信息。
• 实现步骤：
  • 假设使用fetch API进行Ajax请求，首先创建一个函数来发送请求并更新进度条。例如：

  function loadDataWithProgress() {
    var progressBar = document.getElementById('progressBar');
    fetch('your - api - url')
   .then(function (response) {
      if (!response.ok) {
        throw new Error('Network response was not OK');
      }
      var contentLength = response.headers.get('Content - Length');
      var receivedLength = 0;
      var reader = response.body.getReader();
      return new ReadableStream({
        start: function (controller) {
          return pump();
          function pump() {
            return reader.read().then(function ({ done, value }) {
              if (done) {
                controller.close();
                return;
              }
              receivedLength += value.length;
              var progress = (receivedLength / contentLength) * 100;
              progressBar.style.width = progress + '%';
              controller.enqueue(value);
              return pump();
            });
          }
        }
      });
    })
   .then(function (stream) {
      return new Response(stream).text();
    })
   .then(function (data) {
      // 在这里处理接收到的数据，如更新页面内容等
    });
  }
  

• 优点：对于通过Ajax加载的内容，可以提供更精确的进度显示，增强用户体验。
• 缺点：实现相对复杂，需要对fetch和ReadableStream等概念有一定的了解，并且只适用于Ajax请求部分，不能完全代表整个页面的加载进度。

借助第三方库（如NProgress.js）实现进度条

• 原理：像NProgress.js这样的库通过监听页面加载事件和各种资源（如图片、脚本等）的加载情况，自动计算并更新进度条的进度。
• 实现步骤：
  • 首先，引入NProgress.js库。可以通过下载库文件并在HTML中引入，或者使用CDN链接引入。例如：

  <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css" />
  

  • 然后，在JavaScript中初始化进度条。例如：

  NProgress.start();
  window.addEventListener('load', function () {
    NProgress.done();
  });
  

• 优点：使用方便，能够自动跟踪多种资源的加载进度，提供较为精确的进度显示；有较好的样式和动画效果，美观度较高。
• 缺点：需要引入外部库，增加了项目的依赖；可能需要根据项目的具体需求对库的样式和行为进行一定的定制。