在前端开发中，图片是非常重要的资源之一。但是，在图片加载过程中，我们需要确保它们已经完成加载，以便可以正确地显示它们或执行其他操作。本文将介绍如何使用JavaScript / jQuery确定图像是否已经加载，并提供实用的示例代码。
1. 基于原生JavaScript的图像加载检测
在原生JavaScript中，我们可以使用Image对象来加载和检测图像是否已经加载完毕。下面是一个基本的示例代码：
----- --- - --- --------
---------- - ---------- -
----------------------
--
----------- - ---------- -
----------------------
--
------- - --------------------上述代码创建了一个新的Image对象，并为onload和onerror事件分别设置了回调函数。当图像成功加载时，onload事件将被触发并执行相应的回调函数。如果加载失败，onerror事件将被触发并执行相应的回调函数。
1.1 监听多个图像的加载
如果要监听多个图像的加载，我们可以使用Promise.all()方法和map()方法，如下所示：
----- ------ - -------------- ------------- --------------
----- -------- - ---
---------------- -- -
----- --- - --- --------
----- ------- - --- ----------------- ------- -- -
---------- - --------
----------- - -------
---
----------- - ----
-----------------------
---
----------------------------- -- -
--------------------------
----------- -- -
-------------------------
---上面的代码中，我们首先定义一个包含多个图像路径的数组。然后，我们使用map()方法迭代该数组，并为每个图像创建一个新的Image对象和一个Promise对象。Promise对象的resolve和reject回调函数分别设置为Image对象的onload和onerror事件。最后，我们将每个Promise对象添加到promises数组中，并在Promise.all()方法中等待所有Promise对象全部执行完成。
2. 基于jQuery的图像加载检测
如果您正在使用jQuery库，可以使用它提供的.load()或.on()方法来检测图像是否已经加载。下面是一个基本的示例代码：
------------------- ---------- -
----------------------
-------------- ---------- -
----------------------
---上述代码使用jQuery选择器选择所有图像，并为它们绑定了.load()和.error()事件。当图像成功加载时，.load()事件将被触发并执行相应的回调函数。如果加载失败，.error()事件将被触发并执行相应的回调函数。
2.1 监听多个图像的加载
如果要监听多个图像的加载，我们可以使用deferred对象和$.when()方法，如下所示：
----- ------ - -------------- ------------- --------------
----- --------- - ---
-------------- --------------- ---- -
----- --- - ---------------------- -----
----- -------- - -------------
-------------- ------------------
--------------- -----------------
-------------------------
---
--------------- -------------------------- -
--------------------------
------------------ -
-------------------------
---上面的代码中，我们首先定义一个包含多个图像路径的数组。然后，我们使用$.each()方法迭代该数组，并为每个图像创建一个新的元素和一个deferred对象。deferred对象的resolve和reject回调函数分别设置为
元素的.load()和.error()事件。最后，我们将每个deferred对象添加到deferreds数组中
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/11771