Nodejs 如何实现类似微信浏览器顶部的进度条？

Nodejs 如何实现类似微信浏览器顶部的进度条？

没能想明白原理是什么，onload吗？

7 回复

当然可以！要实现一个类似于微信浏览器顶部的进度条，我们可以使用HTML、CSS和JavaScript来创建前端部分，并用Node.js处理后端逻辑。在这个例子中，我们主要关注前端实现。

原理

  1. 监听加载事件：我们需要监听页面的加载进度，这可以通过window对象上的progress事件来实现。
  2. 更新进度条：每当有新的资源加载时，更新进度条的宽度。
  3. 完成加载：当页面完全加载完毕时，进度条达到100%。

示例代码

HTML 文件 (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Bar Example</title>
    <style>
        #progress-bar {
            width: 0;
            height: 5px;
            background-color: blue;
            transition: width 0.1s;
        }
    </style>
</head>
<body>
    <div id="progress-bar"></div>

    <script src="/client.js"></script>
</body>
</html>

JavaScript 文件 (client.js)

// 获取进度条元素
const progressBar = document.getElementById('progress-bar');

// 初始化加载计数器
let loaded = 0;

// 监听加载事件
window.addEventListener('load', (event) => {
    loaded++;
    updateProgress();
});

// 更新进度条
function updateProgress() {
    const total = document.images.length + document.styleSheets.length + document.scripts.length;
    if (loaded >= total) {
        // 当所有资源加载完成后，进度条达到100%
        progressBar.style.width = '100%';
    } else {
        // 更新进度条的宽度
        progressBar.style.width = `${(loaded / total) * 100}%`;
    }
}

// 每加载一个资源就调用updateProgress函数
document.addEventListener('DOMContentLoaded', () => {
    window.addEventListener('load', updateProgress);
});

解释

  1. HTML部分：定义了一个简单的进度条样式，通过CSS设置其宽度和背景颜色。
  2. JavaScript部分：
    • 我们首先获取进度条元素。
    • 使用addEventListener监听load事件，每次资源加载完后调用updateProgress函数。
    • updateProgress函数计算已加载资源的数量与总资源数量的比例，并相应地更新进度条的宽度。

这个实现方式简单且有效，可以根据实际需求进行调整和优化。


socket.io 可以。

http://ricostacruz.com/nprogress/

http://loo2k.com/blog/jquery-loading-bar/ 有介绍原理 http://tutorialzine.com/2013/09/quick-tip-progress-bar/ jquery插件，可直接使用

webkit里面有对应的接口的啊。

微信只不过是调用了手机自带浏览器的内核, 自带浏览器的内核会提供很多api

要实现类似微信浏览器顶部的进度条，可以使用 Node.js 结合前端技术（如 HTML、CSS 和 JavaScript）来完成。这里的主要思路是通过监听浏览器窗口的 load 事件和 progress 事件来动态更新进度条。

实现步骤

  1. 前端页面：创建一个包含进度条的 HTML 页面。
  2. JavaScript 监听器：添加监听器以跟踪页面加载进度。
  3. CSS 样式：为进度条添加样式。

示例代码

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Bar Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="progress-bar-container">
        <div id="progress-bar"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

#progress-bar-container {
    width: 100%;
    background-color: #eee;
}

#progress-bar {
    height: 5px;
    width: 0;
    background-color: #4caf50;
}

JavaScript (script.js)

document.addEventListener("DOMContentLoaded", function() {
    const progressBar = document.getElementById('progress-bar');
    let loaded = 0;

    window.addEventListener('load', () => {
        progressBar.style.width = '100%';
    });

    window.addEventListener('progress', (event) => {
        if (event.lengthComputable) {
            loaded += event.loaded;
            const total = event.total;
            const percentage = Math.round((loaded / total) * 100);
            progressBar.style.width = `${percentage}%`;
        }
    });

    // Simulate loading by adding an event listener on the load event
    window.dispatchEvent(new Event('progress'));
});

解释

  1. HTML: 创建了一个简单的进度条容器，并引入了 CSS 文件和 JavaScript 文件。
  2. CSS: 定义了进度条的基本样式。
  3. JavaScript:
    • 使用 DOMContentLoaded 事件确保 DOM 已经完全加载。
    • 监听 load 事件，在页面完全加载后将进度条宽度设为 100%。
    • 模拟一个 progress 事件，实际应用中可以使用 AJAX 请求或其他方式来触发 progress 事件，从而动态更新进度条。

这个例子展示了如何使用前端技术在 Node.js 中实现类似微信浏览器顶部的进度条。实际应用中，可以根据需要调整进度条的显示逻辑。

回到顶部