我怎样才能确定一个图像是否已经加载,使用JavaScript / jQuery?

阅读时长 4 分钟读完

在前端开发中,图片是非常重要的资源之一。但是,在图片加载过程中,我们需要确保它们已经完成加载,以便可以正确地显示它们或执行其他操作。本文将介绍如何使用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

纠错
反馈