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

概述

通过使用JavaScript来检查图像是否已加载以执行某些操作。在许多情况下，由于图像的大小过大或网络连接质量差，我们的浏览器无法成功加载图像。因此，我们的图像有时可能会显示一些错误。为了知道我们的图像是否已加载，我们有一些方法，例如onload()、onerror()和complete属性。

语法

解决问题的语法如下：

onload=”function()” - 当图像成功加载时，调用此函数。在其中，可以传递任何回调函数以执行特定的操作。
onerror=”function()” - 当图像由于任何原因无法加载时触发此函数。
selector.complete - selector.complete方法选择具有类名、id或标签名的图像，然后检查图像是否已完全加载。

检查已加载的图像有两种方法

方法1 - 在此方法中，我们将使用两种方法 onload() 和 onerror() 。在这两种方法中，将传递一个函数作为参数，在浏览器加载时调用该函数，并检查图像是否已加载。

步骤

步骤1 - 在HTML中创建一个图像标签，并在src属性中插入图像的链接或路径<image src="在这里放入链接"/>。
步骤2 - 访问图像标签并将其存储在变量中。
步骤3 - 在addEventListener()中使用load()方法和error()方法。
步骤4 - 如果在加载浏览器时图像成功加载，load事件将触发并返回特定的动作；否则，如果图像无法加载，则将触发error事件。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Check whether image is loaded or not</title>
   <style>
      body{
         min-height: 90vh;
         display: flex;
         flex-direction: column;
         place-content: center;
         background-color: #0a0a0a;
         color: white;
         text-align: center;
      }
      img{
         width: 50%;
         height: 70%;
         border-radius: 8px;
         margin: auto auto ;
         box-shadow: 0 0 8px white;
      }
   </style>
</head>
   <body>
      <img src= "https://www.tutorialspoint.com/images/logo.png" id="sample" onload="checkLoad()" onerror="checkError()" alt="error">  
      <h2 id="output"></h2>

      <script>
         document.getElementById("sample").addEventListener("load", () => {
            document.getElementById("output").innerText="Image Loaded Sucessfully";
         })
         document.getElementById("sample").addEventListener("error", () => {
            document.getElementById("output").innerText="Error occured while loading image!";
         })
      </script>
   </body>
</html>

在网络浏览器中加载图像时没有错误。因此，在这个示例中，addEventListener()中的load()方法会触发输出“图像加载成功”。

方法2 - 在这种方法中，我们调用图像对象的complete()方法，它检查图像是否完全加载，并根据情况返回true或false。当图像在加载过程中遇到任何问题时，它返回false，否则返回true。

步骤

步骤1 - 在HTML中创建一个图像标签，并在src属性中插入图像的链接或路径 <image src=“put your link here”/>。
步骤2 - 访问图像标签并将其存储在变量中。
步骤3 - 使用图像对象的complete()方法。如果图像在浏览器中加载，则在浏览器上提示true，否则在浏览器上提示false。

示例

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Check whether image is loaded or not</title>
   <style>
      body{
         min-height: 90vh;
         display: flex;
         flex-direction: column;
         place-content: center;
         background-color: #0a0a0a;
         color: white;
         text-align: center;
      }
      img{
         width: 50%;
         height: 70%;
         border-radius: 8px;
         margin: auto auto ;
         box-shadow: 0 0 8px white;
      }
   </style>
</head>
   <body>
      <img src= "https://www.tutorialspoint.com/images/logo.png" id="sample" onload="checkLoad()" onerror="checkError()" alt="error">  
      <h2 id="output"></h2>

      <script>
         var i = document.getElementById("sample");
         var load = i.complete;
         alert(load);
      </script>
   </body>
</html>

上述代码显示了complete()方法返回true的情况下的输出。

结论

complete()方法的返回类型是布尔值，根据当前情况返回true或false。在某些情况下，如图像的URL错误，网络连接差，图像未在指定目录中存在，无法加载图像。上述解决方案在许多情况下都很有帮助，因为它在图像完全加载时触发特定操作。JavaScript中的图像对象包含许多方法，可以帮助操作DOM中的图像。