jQuery网页加载进度条插件如何实现？-网页设计-锦华智联科技

为什么需要加载进度条？

在大型网站或网络较慢的情况下，页面加载可能需要几秒甚至更长时间，如果没有视觉反馈，用户可能会认为页面卡住或出错了，从而选择关闭页面,一个动态的进度条可以：

（图片来源网络，侵删）

提供即时反馈：让用户知道系统正在工作。
提升感知性能：让等待时间感觉更短。
改善整体用户体验：使交互过程更流畅、更专业。

推荐几个优秀的 jQuery 进度条插件

这里推荐几个功能强大、使用简单且维护良好的插件。

Pace.js - 最简单、最优雅的选择

特点：

零配置：引入后几乎什么都不用做,它就能自动工作。
多种主题：内置多种进度条样式（条形、弹跳、光晕、顶部微进度等）。
自动检测：能自动检测 AJAX 请求、事件循环、页面资源加载等。
轻量级：体积非常小,对性能影响极小。

官网：https://github.com/HubSpot/pace

使用方法：

（图片来源网络，侵删）

第一步：引入 jQuery 和 Pace.js

在 HTML 文件的 <head> 标签内引入 Pace.js 的 CSS 和 JS 文件，建议从 CDN 引入。

<head>
    <!-- 引入 Pace.js 的 CSS 文件 (选择一个你喜欢的主题) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/themes/pace-theme-center-circle.min.css" integrity="sha256-4fQcI0J7u2Wv6sZfL0c9yVz5K/gVh0KlDp5Yb5yYyY=" crossorigin="anonymous" />
    <!-- 引入 jQuery (Pace.js 依赖于 jQuery) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 Pace.js 的 JS 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js" integrity="sha256-gqd7YTjg/BtfqWSwsJOvndl0Bxc8gFQuFz7C38GSao=" crossorigin="anonymous"></script>
</head>

第二步：配置（可选）

你可以在 <script> 标签内进行一些简单的配置,比如选择主题。

<script>
    // 在 Pace.js 加载前进行配置
    Pace.options = {
        elements: true, // 监听所有元素
        restartOnRequestAfter: false, // 在 AJAX 请求后不重启
        target: 'body', // 进度条容器
        eventLag: false // 不监听事件延迟
    };
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.4/pace.min.js"></script>

效果： Pace.js 会自动在页面加载时显示一个优雅的进度动画,加载完成后自动消失。

PageProgress.js - 功能丰富、高度可定制

特点：

高度可定制：可以自定义进度条的颜色、高度、位置、动画效果等。
多种触发模式：可以基于页面滚动、AJAX 请求或手动触发。
显示加载百分比：可以显示具体的加载百分比数字。
事件支持：提供了丰富的事件（如 start, progress, done）,方便你进行扩展。

官网：https://github.com/MrSaints/PageProgress

使用方法：

第一步：引入 jQuery 和 PageProgress.js

<head>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 PageProgress.js 的 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pageprogress@1.1.2/dist/pageprogress.css">
    <!-- 引入 PageProgress.js 的 JS -->
    <script src="https://cdn.jsdelivr.net/npm/pageprogress@1.1.2/dist/pageprogress.js"></script>
</head>

第二步：初始化和配置

在 <script> 标签内初始化插件并进行配置。

<script>
    $(document).ready(function() {
        new PageProgress({
            height: 5, // 进度条高度
            color: '#ff0000', // 进度条颜色
            backgroundColor: '#eeeeee', // 背景颜色
            duration: 200, // 动画持续时间 (毫秒)
            easing: 'ease', // 动画效果
            autoRestart: false, // 在 AJAX 请求后自动重启
            target: 'body', // 目标元素
            listenOn: 'window', // 监听对象
            showPercentage: true, // 显示百分比
            onProgress: function(percent) {
                // 进度更新时的回调函数
                console.log('Loading: ' + percent + '%');
            },
            onComplete: function() {
                // 加载完成时的回调函数
                console.log('Loading complete!');
            }
        });
    });
</script>

效果：你可以根据需要创建出完全符合你网站风格的进度条。

NProgress.js - 专为 AJAX 应用设计

特点：

轻量级：专注于提供流畅的进度条体验。
无依赖：除了 jQuery 之外,它本身没有其他依赖。
专为 AJAX 优化：非常适合在单页应用中，为每个 AJAX 请求显示进度。
简单易用：API 非常简单，只有 start(), set(), inc(), done() 等几个方法。

官网：https://ricostacruz.com/nprogress/

使用方法：

第一步：引入 jQuery 和 NProgress.js

<head>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 NProgress.js 的 CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" integrity="sha256-cko8G+asAtsF3uUz+4yKmt5A1WVpA4sP8+o7AytoQ=" crossorigin="anonymous" />
    <!-- 引入 NProgress.js 的 JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js" integrity="sha256-pT4/D1b4hb1cJ0yZkZ8G7O4D2pNJJ1GcT2Z9eY8lUw=" crossorigin="anonymous"></script>
</head>

第二步：在 AJAX 请求中使用

NProgress 通常与 AJAX 请求结合使用。

<script>
    // 页面开始加载时启动进度条
    $(document).ready(function() {
        NProgress.start();
    });
    // 模拟一个 AJAX 请求
    $.ajax({
        url: 'https://api.example.com/data',
        method: 'GET',
        success: function(data) {
            console.log('Data loaded:', data);
            // 请求完成时，进度条结束
            NProgress.done();
        },
        error: function() {
            console.error('Failed to load data.');
            // 即使出错，也结束进度条
            NProgress.done();
        }
    });
    // 你也可以手动控制进度
    // NProgress.inc(); // 增加一点进度
    // NProgress.set(0.4); // 设置进度为 40%
</script>

效果： NProgress 通常显示在页面顶部,非常适合为异步操作提供反馈。

如何选择？

插件	优点	缺点	适用场景
Pace.js	零配置，开箱即用，主题丰富	定制性相对较弱	快速开发，任何需要页面加载进度条的网站，尤其是博客、企业官网等。
PageProgress.js	功能强大，高度可定制，支持百分比和事件	配置项较多，需要一些代码	对UI 要求高的项目，需要完全自定义进度条样式和交互逻辑。
NProgress.js	轻量，专为 AJAX 优化，API 简单	不适用于整个页面加载，主要用于异步操作	单页应用，需要为每个 AJAX 请求、路由切换等操作显示进度。

总结建议：

如果你只是想快速给网站加一个加载进度条，Pace.js 是不二之选。
如果你对进度条的样式和功能有非常具体的要求，PageProgress.js 会给你足够的自由度。
如果你的网站是单页应用，充满了 AJAX 请求，NProgress.js 是最合适的选择。

希望这份详细的介绍能帮助你选择并使用合适的 jQuery 加载进度条插件！