JavaScript 如何检测“IMG”元素加载是否已经开始和/或向服务器发出了请求

有时在插入图像到HTML网站时，图像可能因以下原因而无法加载 –

由于图像URL错误
网络问题

我们要执行的任务是检测img元素的加载是否已经开始和/或请求是否已经发送到服务器。在此之前，让我们快速了解HTML<img>标签。

HTML`<img>`标签

要将图像插入网页中，请使用HTML <img>标签。在现代网站中，图片是通过包含图像空间的<img>元素链接到网页的。这样可以防止网站直接向网页添加图像。

语法

下面是<img>标签的语法：

<img src="" alt="" width="" height="">

让我们来看下面的示例，以更好地理解如何检测图像是否已加载和/或是否已向服务器发出请求。

示例

在以下示例中，我们创建了一个简单的表单，用于检查图像是否已加载或是否已向服务器发出请求。

<!DOCTYPE html>
<html>
   <head>
      <title>detecting image load</title>
   </head>
   <body>
      <h1>case1</h1>
      <img src= "https://www.tutorialspoint.com/images/logo.png"
         onload="javascript: alert('image loaded')"
         onerror="javascript: alert('image failed to load')" />
      <h2>case2</h2>
      <img src="#" onload="javascript: alert('Image Loaded')"
         onerror="javascript: alert('Failed to load the image')" />
   </body>
</html>

当脚本被执行时，它将生成一个输出，显示一个警报，显示已加载的图片并在网页上显示一张图片。在第二种情况下，它将显示一个警报，显示加载图片失败并显示默认的损坏图片。

示例

考虑以下示例，我们在HTML中使用image-complete属性，它返回一个布尔值：如果图片加载了，就显示true；否则，显示false。

<!DOCTYPE html>
<html>
   <head>
      <title>detecting imagr load</title>
   </head>
   <body>
      <img src=
      "https://www.tutorialspoint.com/java/images/java-mini-logo.jpg">
      <script>
         window.addEventListener("load", event => {
            var image = document.querySelector('img');
            var load = image.complete;
            alert(load);
         });
      </script>
   </body>
</html>

运行上面的脚本后，输出窗口会弹出显示警报”true”，并在网页上显示一张图片。