在前端开发中，经常需要在网页上展示图片。但是由于网络环境的不稳定和图片文件大小的不同，有时候需要通过 JavaScript 来判断图片是否已经加载完成。本文将介绍如何通过 JavaScript 回调来确定图片是否已加载完成，并提供示例代码。
图片加载事件
在浏览器中，图片加载过程分为两个阶段：下载和渲染。下载是指浏览器从服务器获取图片文件；渲染是指浏览器将图片显示在网页上。当图片下载完成并开始渲染时，会触发 load 事件。如果下载过程中出现错误，会触发 error 事件。
我们可以利用这些事件来判断图片是否加载完成。具体实现方式可以使用 Image 对象，该对象拥有 onload 和 onerror 两个回调函数。当图片加载完成时，会触发 onload 回调函数；当图片加载失败时，会触发 onerror 回调函数。
下面是一个示例代码，演示如何使用 Image 对象来加载图片：
const img = new Image();
img.onload = function() {
console.log('图片加载成功');
};
img.onerror = function() {
console.log('图片加载失败');
};
img.src = 'https://example.com/image.jpg';在执行以上代码后，控制台输出信息将取决于图片加载是否成功。
多个图片的加载事件
如果我们需要同时加载多个图片，那么就需要在每张图片上分别设置回调函数。为了方便起见，我们可以使用 Promise 对象来封装这个过程。下面是一个示例代码，演示如何使用 Promise 对象来加载多个图片：
-- -------------------- ---- -------
-------- -------------- -
------ --- ------------------------- ------- -
----- --- - --- --------
---------- - ---------- -
-------------
--
----------- - ---------- -
---------- --------------- - ------
--
------- - ----
---
-
-------------
--------------------------------------------
--------------------------------------------
--------------------------------------------
------------------------ -
----------------------- --------
------------------------ -
-------------------
---在执行以上代码后，如果所有图片加载成功，那么控制台输出信息将包含所有加载成功的图片对象；如果有任何一张图片加载失败，那么控制台输出信息将包含失败信息。
总结
通过本文的介绍，我们了解了如何使用 JavaScript 回调来判断图片是否已加载完成，并提供了示例代码。在实际开发中，我们可以根据自己的需求来选择合适的方案。希望本文能对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12046