如何创建一个用于检测图片是否加载完成的JavaScript回调函数

像JavaScript这样的强大编程语言经常用来构建交互式、动态的网页。在网站上加载图片是JavaScript最常见的用法之一。然而，加载图片可能会有挑战，尤其是在确定加载是否完成的时候。本文将介绍如何创建一个JavaScript回调函数，用于检测图片是否已加载。

什么是回调函数

回调函数是在初始函数完成运行后被调用，并作为参数传递给另一个函数的函数。换句话说，回调函数是在另一个函数执行完成后执行的函数。JavaScript具有强大的功能，可以创建更复杂和动态的网页。

为什么要使用回调函数来加载图片

上传图片到网站时，当在HTML代码中发现元素时，浏览器开始加载图片。当浏览器到达HTML代码的末尾时，图片可能还没有加载完成。如果在图片加载完成之前尝试访问该图片，可能会出现问题。例如，如果在图片加载完成之前尝试获取图片的宽度和高度，可能会得到不准确的结果。

为了解决这个问题，可以使用一个在图片加载完成后执行的回调方法。通过这样做，可以确保在尝试访问图片属性之前，图片已完全加载。

如何为图片加载创建一个回调函数

有几种方法可以为图片加载创建回调函数。

使用`<img>`标签的onload事件

使用<img>标签的onload事件是最常见的方法。当图片完全加载完成时，onload事件会触发。你可以通过将<img>标签的onload属性设置为回调函数的名称来将回调函数附加到此事件上。

例如，假设你想开发一个回调函数来显示图片的宽度和高度，而你有一个id为”myImage”的<img>元素。

示例

以下代码可用于实现此功能 –

<html>
<body>
   <div id="width-display"></div>
   <div id="height-display"></div>
   <div id= "info"></div>
   <img id="myImage" onload="imageLoaded()" src="https://picsum.photos/600/400" />
   <div id="data-display"></div>
   <div id="error-display"></div>
   <script>
      function imageLoaded() {
         var img = document.getElementById("myImage");
         var widthDisplay = document.getElementById("width-display");
         widthDisplay.innerHTML = "Width: " + img.width;
         var heightDisplay = document.getElementById("height-display");
         heightDisplay.innerHTML = "Height: " + img.height;
         document.getElementById("info").innerHTML = "Image is loaded successfully.";
      }
   </script>
</body>
</html>

每次刷新页面时，图像都会不同。

在这个示例中，函数imageLoaded()被附加到onload事件上的< img >标签。当图像完全加载时，函数就会执行，显示图像的宽度和高度。

使用addEventListener方法

addEventListener方法也可以用于构建图像加载的回调函数。使用这种方法，您可以指定在触发事件时要使用的回调函数，并将事件监听器附加到元素上。这种技术可以用于向<img>标签的”load”事件添加事件监听器。

示例

使用addEventListener方法，您可以编写以下代码来创建一个图像加载的回调函数 −

<html>
<body>
   <img id="myImage" src="https://picsum.photos/200/300" />
   <p id="width-display"></p>
   <p id="height-display"></p>
   <div id= "info"></div>
   <script type="text/javascript">
      var img = document.getElementById("myImage");
      img.addEventListener("load", function(){
      var widthDisplay = document.getElementById("width-display");
      widthDisplay.innerHTML = "Width: " + img.width;
      var heightDisplay = document.getElementById("height-display");
      heightDisplay.innerHTML = "Height: " + img.height;
      document.getElementById("info").innerHTML = "Image is loaded successfully.";
   });
   </script>
</body>
</html>

在这个示例中，addEventListener方法被用来将imageLoaded函数绑定到<img>标签的”load”事件上。当图片完全加载后，函数被执行并显示出图片的宽度和高度。

使用setTimeout函数

最常用的生成图片加载回调的两种方法是onload事件和addEventListener函数。然而，有许多不同的方法可以做到这一点。

示例

例如，你可以在预定的时间段之后使用setTimeout方法来检查图片是否已加载。

<html>
<head>
   <script>
      function checkImageLoaded() {
         var img = document.getElementById("myImage");
         if (img.complete) {
            document.getElementById("width").innerHTML = "Width: " + img.width;
            document.getElementById("height").innerHTML = "Height: " + img.height;
            document.getElementById("info").innerHTML = "Image is loaded successfully.";
         } else {
            setTimeout(checkImageLoaded, 50); 
         }
      }
   </script>
</head>
<body>
   <img id="myImage" onload="checkImageLoaded()" src="https://picsum.photos/100/100" />
   <p id="width"></p>
   <p id="height"></p>
   <p id="info"></p>
</body>
</html>

这个示例每50毫秒重复调用checkImageLoaded方法，直到图像完全加载。

在本教程中，我们介绍了使用回调函数加载图片的价值，以及几种回调函数创建技术。按照以下说明，您可以快速开发一个用于加载图片的回调函数，并确保您的照片在可以访问之前已完全加载。