JavaScript 如何在图片加载后执行回调函数？

使用回调处理图像加载的替代方法

加载图像时，了解图像何时完成对于实现特定功能至关重要。本问题探讨了在 JavaScript 中加载图像时执行回调的选项。

解决方案 1：.complete 回调

可靠且符合标准的方法涉及使用 .complete属性以及回调函数。 .complete 检查图像是否已经完成加载，确保在适用的情况下立即触发回调。

var img = document.querySelector('img');

function loaded() {
  alert('loaded');
}

if (img.complete) {
  loaded();
} else {
  img.addEventListener('load', loaded);
  img.addEventListener('error', function() {
      alert('error');
  });
}

此代码：

1. 使用 img 初始化图像元素。
2. 定义加载的回调函数来处理图像加载。
3. 检查图像是否已经完成使用 .complete。
4. 如果完成，则立即调用回调。
5. 如果未完成，则附加“load”（在加载时执行回调）和“error”（以通知加载失败）。

其他备注

这种方式效率很高，只要图像准备好就触发回调，避免了事件监听器等待造成的不必要的延迟。它也受到主要浏览器的支持，并允许轻松处理错误。

以上是JavaScript 如何在图片加载后执行回调函数？的详细内容。更多信息请关注PHP中文网其他相关文章！