如何检查图像是否已加载？

在 HTML 页面中插入图像时，有时图像可能无法加载，原因如下：

• 获取图像 URL 错误
• 互联网连接不良

所以我们可能想检查图像是否由于这些原因没有加载。要检查我们可以使用以下方法

方法一：

使用 的属性来检查图像是否加载的天气。我们将使用的属性是：

• onload：图片加载执行时触发onload事件
• onerror：执行过程中发生错误时触发onerror事件

例子：

输出：

方法二：

在 HTML DOM 中使用图像完整属性

如果图像已加载，则此属性返回一个布尔值，否则返回 true 否则返回 false

例子：

  
    Checking if image is loaded
  
  
  window.addEventListener("load", event => {
  var image = document.querySelector('img');
  var load = image.complete;
  alert(load);
});
  
  
    
  

此处变量 load 检查图像是否已加载。如果加载了图像，则警告为 true，否则警告为 false。

输出：

支持的浏览器：

• 谷歌浏览器
• 火狐
• 互联网浏览器
• 苹果浏览器
• 歌剧