首页 >web前端 >js教程 >图片加载成功后如何执行JavaScript回调?

图片加载成功后如何执行JavaScript回调?

Linda Hamilton
Linda Hamilton原创
2024-11-27 21:24:14656浏览

How to Execute a JavaScript Callback After Successful Image Loading?

图像加载和 JavaScript 回调

问题:如何在成功加载图像后执行 JavaScript 回调?或者,有什么方法可以完成这个任务吗?

答案:

JavaScript 中有多种方法可以实现图像加载回调。一种方法涉及利用 .complete 属性和回调函数,如下所示:

JavaScript 代码:

var img = document.querySelector('img')

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

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

此方法符合标准,不符合标准需要外部依赖,并且不会引入不必要的延迟。最初会检查 img.complete 属性,如果图像已加载,则立即执行回调。如果图像未加载,事件侦听器将添加到“load”和“error”事件中,确保回调正确执行。

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn