在前端开发中，我们经常需要使用图片来优化用户体验。然而，当图片较大或者网络不佳时，图片的加载可能会导致页面卡死或者显示空白。因此，在加载图片时，我们需要知道图片是否已经完全加载完成，以便在图片未加载完成时给出一些提示或者占位图。
JavaScript 中提供了 new Image() 接口可以用于创建一个新的 HTMLImageElement 对象，从而实现判断图片是否加载完成的功能。下面将详细介绍如何使用 new Image() 实现该功能。
使用 new Image() 加载图片
我们可以通过以下代码使用 new Image() 加载图片：
const img = new Image(); img.src = 'path/to/image';
new Image() 创建了一个 HTMLImageElement 对象，并且将其赋值给 img 变量。接着，我们将图片地址赋值给 img.src 属性，就可以开始加载图片了。
判断图片是否加载完成
在图片加载完成之后，我们希望能够获得这个信息。我们可以监听 load 和 error 事件实现这个功能。例如：
const img = new Image();
img.src = 'path/to/image';
img.onload = function () {
console.log('图片加载完成！');
};
img.onerror = function () {
console.log('图片加载失败！');
};当图片加载完成时，onload 事件将会被触发，反之，当图片加载失败时，onerror 事件将会被触发。
如何判断图片是否已经加载完成？
在某些情况下，我们需要知道图片是否已经完全加载完成。但是如何判断呢？一种简单的方式是判断图片的 complete 属性。例如：
const img = new Image();
img.src = 'path/to/image';
img.onload = function () {
console.log('图片加载完成！');
console.log(img.complete); // 输出 true
};
console.log(img.complete); // 输出 false在图片加载完成后，img.complete 的值将变为 true，因此我们可以通过检查这个属性来确定图片是否已经完全加载完成。
示例代码
下面是一个完整的示例代码，展示了如何使用 new Image() 判断图片是否已经完全加载完成：
-- -------------------- ---- -------
--------- -----
------
------
----------------
---- ---------- ------------------------ ------------
--------
----- --- - --- --------
------- - ---------------------
---------- - -------- -- -
-----------------------
--------------------------
------------------------------------- - ----------
------------------------------------ - --------
--
----------- - -------- -- -
-----------------------
------------------------------------- - ----------
--
---------
-------
-------在这个示例代码中，我们首先创建了一个 HTML 页面，并且添加了一个正在加载图片的提示以及一个占位图。接着，我们使用 new Image() 加载图片，并且在图片加载完成或者失败时打印一些信息并修改页面上的提示和占位图。
总结
本文介绍了如何使用 new Image() 判断图片是否已经完全加载完成。通过监听 load 和 error 事件以及检查 complete 属性，我们可以判断图片是否已经加载完成，并且在图片未加载完成时给出一些提示或者占位图，优化用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31124