在网页加载时，用户需要等待一段时间才能看到完整的页面。这段等待时间取决于网络速度和页面大小等因素，对于用户来说可能是非常不愉快的体验。为了提高用户体验，我们可以在页面加载期间显示一个进度条。
实现方式
我们可以使用 HTML，CSS 和 JavaScript 来实现加载进度条。首先在 HTML 中添加一个 <div> 元素作为进度条：
<div id="loading-bar"></div>
然后在 CSS 中定义它的样式：
-- -------------------- ---- ------- ------------ - --------- ------ ---- -- ----- -- ------ ----- ------- ---- ----------------- -------- -------- ----- -
这会将进度条固定在页面顶部，并设置其颜色和高度。接下来，在 JavaScript 中监听 load 事件并更新进度条的宽度：
window.addEventListener('load', function() {
var loadingBar = document.getElementById('loading-bar');
loadingBar.style.width = '100%';
});这段代码会在整个页面加载完成后将进度条的宽度设置为 100%。但是，如果页面中包含大量资源（如图像、脚本和样式表），则可能需要更精确的进度条。为了实现这一点，我们可以监听页面中每个资源的 load 事件，并根据已加载的资源数量来更新进度条。
-- -------------------- ---- ------- --- -------------- - ------------------------------------------ --- --------------- - -- --- ---------- - --------------------------------------- -------- ------------------ - ------------------ --- ------- - ---------------- - --------------- - ---- ---------------------- - ------- - ---- - ------------------------------------------------------------------------ - -------------------------------- ------------------ ---
这里使用了 getElementsByTagName 方法来获取页面中所有元素，然后使用 Array.from 方法将其转换为数组。然后，我们循环遍历每个元素并添加 load 事件监听器。在事件处理程序中，我们增加已加载的资源计数器，根据已加载和总资源数量计算百分比，并更新进度条的宽度。
示例代码
下面是完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- --- ---------------
-------
------------ -
--------- ------
---- --
----- --
------ ---
------- ----
----------------- --------
-------- -----
----------- ----- ---- ---------
-
--------
-------
------
---- -----------------------
---------- -----------
---- ------------------------------------- -------
--------
--- -------------- - ------------------------------------------
--- --------------- - --
--- ---------- - ---------------------------------------
-------- ------------------ -
------------------
--- ------- - ---------------- - --------------- - ----
---------------------- - ------- - ----
-
------------------------------------------------------------------------ -
-------------------------------- ------------------
---
------------------------------- ---------- -
---------------------- - -------
--------------------- -
----------------------------------------------
-- -----
---
---------
-------
-------这个示例页面在加载期间会显示一个进度条，并在加载完成后自动消失。你可以使用 Chrome 开发者工具的网络面板来模拟慢速网络连接并测试进度条的效果。
结语
通过展示一个进度条，可以提高用户体验并增加网站的专业感。在实际应用中，请注意避免过早地
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29472