与国同行,追梦不止,礼赞中华人民共和国成立70周年华诞!

JavaScript | jQuery 判断图片加载完毕

其他 浅灬笑 7℃ 0评论

onload事件用于处理Window、XMLHttpRequest、img等元素的加载事件,当一个资源加载完毕的时候会触发load事件,因此我们在动态加载一张图片的时候,例如验证码,可以通过这个事件来判断是否完成加载,我们也可以使用img的complete属性(true|false)来判断图片是否加载完毕,如果加载出错,可以使用error事件来监听,例如下面的代码。


var img = document.querySelector('img')

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

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

如果你使用的是jQuery,那么可以使用$(“img”).on(‘load’)或者$(‘img’).on(‘error’)进行监听,load表示加载成功,error表示加载失败。对于complete属性,jQuery下使用$(‘img’)[0].complete 来获取。

转载请注明:悠然品鉴 » JavaScript | jQuery 判断图片加载完毕

喜欢 (0)or分享 (0)
发表我的评论
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址