在前端开发过程中，我们经常需要使用图片。但是，加载不正确或者加载失败的图片会降低用户体验，并且可能导致应用程序出现错误。因此，我们需要确保图像已经被正确加载。
1. 使用Image对象进行检测
在JavaScript中，我们可以使用Image对象来检测图像是否被正确加载。当创建一个Image对象时，它会自动开始加载指定的图像。
const img = new Image();
img.onload = function() {
console.log('图片已成功加载');
}
img.onerror = function() {
console.log('图片加载失败');
}
img.src = 'example.png';在上面的示例代码中，我们创建了一个新的Image对象，并为其指定了onload和onerror事件处理程序。当图像成功加载时，将触发onload事件；当图像加载失败时，则会触发onerror事件。
值得注意的是，我们必须在设置img.src属性之前定义onload和onerror事件处理程序，否则可能无法正确检测到图像是否被正确加载。
2. 检测多个图像
如果需要检测多个图像，我们可以使用Promise.all方法，以确保所有图像都已加载完成。
-- -------------------- ---- -------
----- ---------- - ---------------- --------------- ----------------
----- -------- - ---
------------------------ -- -
----- --- - --- --------
----- ------- - --- ----------------- ------- -- -
---------- - --------
----------- - -------
---
------- - ----
-----------------------
---
----------------------------- -- -
-------------------------
----------- -- -
-----------------------------
---在上述示例代码中，我们创建了一个数组promises，用于存储每个图像的promise对象。然后，我们使用forEach循环遍历imgSrcList数组，并为每个图像创建一个新的Image对象。对于每个Image对象，我们使用一个新的promise对象包装其onload和onerror事件。
最后，我们将每个promise对象添加到promises数组中，并使用Promise.all方法等待所有promise对象都成功解决。如果其中任何一个promise对象被拒绝，则会触发.catch()方法。
3. 结论
与其他前端技术相比，检测图像是否正确加载似乎是一个非常简单的任务。但是，在实际开发中，它确实是确保应用程序正常运行的一项必要任务。我们可以使用Image对象来轻松地检测图像是否正确加载，并且使用Promise.all方法可以很容易地检测多个图像。
希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9202
