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

概述

为了执行一些操作，检查图像是否被加载，可以通过使用JavaScript来完成。在许多情况下，我们的浏览器无法加载图像，这是因为图像的尺寸太大，或网络连接不畅。所以我们的图像有时会显示一些错误。因此，为了了解图像是否被加载，我们有一些方法，如onload()、onerror()和complete属性。

语法

解决该问题的语法是–

onload=”function()” – 当图像被成功加载时，该函数被调用。在此，任何回调函数都会被传递，以执行特定的动作。
onerror=”function()” – 当图像在加载过程中由于任何原因而面临问题时，该函数会被触发。
selector.complete – selector.complete方法通过类名、ID或标签名选择图像，然后检查图像是否被完全加载。

为了检查加载的图像，我们有两种方法

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

算法

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

例子

<!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()方法会触发输出 “Image Loaded Successfully”。

方法2 --在这个方法中，我们调用图像对象的complete()方法，它检查图像是否被完全加载，并代表它返回true或false。当图像在加载过程中面临任何问题时，它返回false，否则返回true。

算法

第1步 – 在HTML中创建一个图像标签，并在src属性中插入一个图像的链接或路径。
第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()方法的返回类型是布尔值，因为它根据当前情况返回真或假。在某些情况下，图像不能被加载，如图像的URL错误，网络连接不畅，图像不在所在目录中。上述解决方案在很多情况下是有帮助的，因为它在图像完全加载后会触发一个特定的动作。JavaScript中的图像对象包含许多方法，有助于在DOM中操作图像。