JavaScript | jQuery 判断图片加载完毕

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 来获取。