如何实现网页加载进度条？

网页加载进度条是一种常见的用户体验优化功能，它能够告知用户网页加载的状态，避免用户因页面加载缓慢而产生不必要的焦虑。尤其在大型网页或需要加载大量资源的网页中，加载进度条尤为重要。本文将详细介绍如何在网页中实现加载进度条，常见的实现方式以及相关技巧。

一、进度条的基本原理

进度条的基本原理是通过实时监控页面资源的加载状态，动态更新进度的显示。常见的做法是利用 JavaScript 检测页面的加载进度，并通过 CSS 样式展示进度条。页面加载的主要资源包括 HTML、CSS、JavaScript 文件、图片等。

二、实现网页加载进度条的方法

1. 使用 window.onload 和 setInterval 结合实现

这种方法通过监听页面的 load 事件或使用定时器来监控资源的加载进度。

步骤：

  1. 创建一个基本的 HTML 结构，其中包含进度条的元素。
  2. 使用 JavaScript 定时器检查资源加载进度，更新进度条的宽度。

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Loading Progress Bar</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        #progress-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #f3f3f3;
            z-index: 9999;
        }
        #progress-bar {
            width: 0;
            height: 100%;
            background-color: #4caf50;
            transition: width 0.1s ease;
        }
    </style>
</head>
<body>
    <div id="progress-container">
        <div id="progress-bar"></div>
    </div>

    <script>
        window.onload = () => {
            let progress = 0;
            const progressBar = document.getElementById('progress-bar');
            const interval = setInterval(() => {
                progress += 2;  // Increment progress
                progressBar.style.width = progress + '%';

                // Once the progress reaches 100%, clear the interval
                if (progress >= 100) {
                    clearInterval(interval);
                }
            }, 100); // Update every 100ms
        };
    </script>
</body>
</html>

解释：

  • #progress-container 是进度条的容器，#progress-bar 是实际的进度条元素。
  • 使用 setInterval 定时器模拟进度条的增长，每 100 毫秒增加 2%，直到达到 100%。

优点：

  • 简单易实现，适用于小型项目。
  • 不依赖复杂的 API，直接通过 JavaScript 和 CSS 完成。

缺点：

  • 进度条的增长是固定的，并不反映实际资源的加载进度。

2. 使用 window.performance 和 XMLHttpRequest 获取实际资源加载进度

这种方法通过使用浏览器的 window.performance API 和 XMLHttpRequest 对象来监控页面的实际资源加载状态，从而实现更精确的加载进度条。

实现步骤：

  1. 使用 window.performance 获取页面的性能数据。
  2. 在 XMLHttpRequest 中监听加载事件，获取各个资源的加载状态。
  3. 动态更新进度条。

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Loading Progress Bar</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        #progress-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #f3f3f3;
            z-index: 9999;
        }
        #progress-bar {
            width: 0;
            height: 100%;
            background-color: #4caf50;
        }
    </style>
</head>
<body>
    <div id="progress-container">
        <div id="progress-bar"></div>
    </div>

    <script>
        function updateProgress() {
            const performanceData = window.performance.getEntriesByType("resource");
            const totalResources = performanceData.length;
            let loadedResources = 0;

            performanceData.forEach((resource) => {
                if (resource.responseEnd > 0) {
                    loadedResources++;
                }
            });

            const progress = (loadedResources / totalResources) * 100;
            document.getElementById('progress-bar').style.width = progress + '%';

            if (loadedResources === totalResources) {
                clearInterval(progressInterval);
            }
        }

        const progressInterval = setInterval(updateProgress, 100);
    </script>
</body>
</html>

解释：

  • window.performance.getEntriesByType("resource") 获取页面加载的所有资源（如图片、CSS、JS 文件）。
  • 通过遍历资源数据，计算已加载的资源数量，并根据此更新进度条。

优点：

  • 精确反映页面资源加载的实际进度。
  • 不依赖于人工设置的进度增量。

缺点：

  • 需要浏览器支持 window.performance API。
  • 代码较为复杂，可能对开发者的技术要求较高。

3. 使用第三方库

如果想快速实现一个高度自定义的进度条，或者需要更强的控制功能，可以使用现成的第三方库。常见的库如 NProgress 和 pace.js 提供了开箱即用的进度条功能，开发者只需要引入库并进行简单配置即可。

例如，使用 NProgress 实现进度条：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Loading Progress Bar</title>
    <link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.css>">
</head>
<body>

    <script src="<https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.js>"></script>
    <script>
        NProgress.start(); // 开始进度条

        window.onload = () => {
            NProgress.done(); // 加载完成时结束进度条
        };
    </script>
</body>
</html>

优点：

  • 使用第三方库，能快速实现专业级的进度条效果。
  • 提供了丰富的自定义选项和事件回调，易于扩展。

缺点：

  • 引入外部库可能增加页面加载时间。
  • 依赖于第三方库，可能存在版本兼容性问题。

三、总结

网页加载进度条不仅能提升用户体验，还能有效告知用户页面加载的状态。实现方法有多种，简单的方法如使用 setInterval 或 window.onload 来模拟进度条的更新；而更精确的方法则是通过 window.performance 获取资源加载进度。对于需要快速实现并且高度定制的场景，第三方库如 NProgress 提供了更加简洁的解决方案。根据项目需求选择合适的实现方式，可以让用户在浏览网页时拥有更加流畅的体验。

# 前端 # 面试
Logo
技术共进，成长同行——讯飞AI开发者社区

技术共进，成长同行——讯飞AI开发者社区

更多推荐

论文笔记：AlphaEdit: Null-Space Constrained Knowledge Editing for Language Models（AlphaEdit）

论文发表于人工智能顶会ICLR（基于定位和修改的模型编辑方法（针对和等）会破坏LLM中最初保存的知识，特别是在顺序编辑场景。为此，本文提出AlphaEdit：1、在将保留知识应用于参数之前，将扰动投影到保留知识的零空间上。2、从理论上证明，这种预测确保了在查询保留的知识时，编辑后的LLM的输出保持不变，从而减轻中断问题。3、对各种LLM（包括LLaMA3、GPT2XL和GPT-J）的广泛实验表明，

avatar 讯飞AI开发者社区
cover

青柠AI（paperwx）专业的论文写作工具，堪称论文写作领域的实用神器

avatar 讯飞AI开发者社区

2025 年就业竞争激烈！当1222 万毕业生遭遇 “35 岁门槛” 与 AI 革命的双重冲击

人工智能

avatar 讯飞AI开发者社区