在网页开发中，图片是不可或缺的元素。当我们在页面中加载大量图片时，可能会遇到图片加载速度慢的问题。这时候，为了提高用户体验，我们可以利用 JavaScript 来实现图片加载进度条。
监听图片加载进度事件
在 JavaScript 中，可以通过监听 Image 对象的 load 和 error 事件来获取图片的加载状态。load 事件表示图片已经加载完成，error 事件表示出现了加载错误。我们可以在 load 事件中更新进度条状态，如下所示：
const img = new Image();
img.onload = function () {
// 图片加载完成后的操作
};
img.onerror = function () {
// 加载错误后的操作
};
img.src = 'image.png';其中，src 属性表示要加载的图片地址。
获取图片加载进度
为了实现进度条效果，我们需要获取图片加载的进度。由于浏览器没有提供直接获取图片加载进度的方法，因此我们需要自己计算。首先，我们可以通过判断 Image 对象的 complete 属性来判断图片是否已经加载完成。如果图片已经加载完成，则进度为 100%；否则，我们可以通过 Image 对象的 naturalWidth 和 naturalHeight 属性计算出图片的总大小，再结合 Image 对象的 onprogress 事件获取目前已经加载的大小，从而计算出加载进度。示例代码如下：
-- -------------------- ---- -------
----- --- - --- --------
---------- - -------- -- -
--------------------
--
----------- - -------- -- -
-------------------
--
-------------- - -------- --- -
-- -------------------- -
----- ------- - -------------------- - -------- - -----
------------------------
-
--
------- - ------------
-------- ------------------------ -
-- -------
-在 onprogress 事件中，我们通过 e.loaded 和 e.total 属性获取目前已经加载的大小和总大小，然后计算出当前加载进度，并调用 updateProgress 方法更新进度条状态。
完整示例
下面是一个完整的图片加载进度条示例代码：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
---------------------
-------
------------- -
------ ------
------- -----
----------------- -----
-
--------- -
------- -----
----------------- --------
-
--------
-------
------
---- ---------------------
---- -----------------------
------
--------
----- --- - --- --------
---------- - -------- -- -
--------------------
--
----------- - -------- -- -
-------------------
--
-------------- - -------- --- -
-- -------------------- -
----- ------- - -------------------- - -------- - -----
------------------------
-
--
------- - ------------
-------- ------------------------ -
----- ----------- - ------------------------------------
-- --------- --- --- -
--------------------------------- - ----------
-------
-
----------------------- - ---------------
-
---------
-------
-------在这个示例中，我们通过 CSS 实现一个简单的进度条效果，并通过 JavaScript 监听图片加载事件和进度事件来更新进度条状态。当图片加载完成时，我们调用 updateProgress 方法将进度条设置为 100%；当加载出错时，我们将进度条颜色设置为红色；否则，我们根据当前加载进度更新进度条宽度。
上述代码可以直接运行在浏览器中，你可以将其中的 image.png 替换成你自己的图片地址来测试效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25982