如何实现网页加载进度条

合集 - 前端小知识点(36)

1.使用同一个链接，如何实现PC打开是web 应用、手机打开是一个H5应用01-01 2.如何保证用户的使用体验01-01 3.如何解决页面请求接口大规模并发问题01-01 4.设计一套全站请求耗时统计工具01-01 5.大文件上传01-01 6.h5如何解决移动端适配问题01-01 7.实现站点一键换肤功能实现方式有哪些01-01

8.如何实现网页加载进度条01-01

9.常见图片懒加载方式有哪些01-01 10.cookie构成部分有哪些01-01 11.DNS协议了解多少01-01 12.函数式编程了解多少01-01 13.一直在window上面挂东西是否有什么风险01-01 14.小程序为什么会有两个线程01-01 15.如何通过设置失效时间清除本地存储的数据?01-01 16.如果不使用脚手架，如果用webpack构建一个自己的react应用01-01 17.用 nodejs 实现一个命令行工具，统计输入目录下面指定代码的行数01-01 18.package.json 里面 sideEffects 属性的作用01-01 19.script 标签上有那些属性01-01 20.SPA 中使用 hash 路由时作用和意义01-01 21.用户访问页面白屏了，原因是啥如何排查?01-01 22.[代码实现]S 中如何实现大对象深度对比01-01 23.JavaScript 中处理 100 万数据时确保性能和流畅度的几种方法01-01 24.<script> 标签放在 HTML 文档的 <body> 内底部01-01 25.虚拟滚动加加载的原理和实现思路01-01 26.ts二刷01-11 27.promise面试题01-11 28.命令行创建 uni-app 项目01-12 29.uniapp+v3的小知识点01-26 30.ts文件忽略校验01-27 31.['',''].join(" ").trim()01-28 32.自定义导航栏交互(导航栏左上角按钮+滚动动画效果)01-28 33.可视化点击x轴标签实现标签文字切换02-09 34.运行vue -V的时候vue : 无法加载文件 C:\Users\jiaho\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本02-12 35.uniapp+vue2实现下载相关02-26 36.深度响应式劫持vue303-07

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

posted @ 2025-01-01 18:25 jialiangzai 阅读(97) 评论(0) 编辑收藏举报

JIA

光明神已陨落，现在由光明引领我

如何实现网页加载进度条

公告

最新随笔

我的标签

合集

随笔分类

随笔档案

文章分类

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

喜欢请打赏