Как определить, что изображение неправильно загружено / заполнено на веб-странице?

Question

Как определить изображение, которое неправильно загружается на веб-странице? Я использовал следующее jquery, но не работает.

$('#image1').on('load', function() {
    if ($('#image1').prop('complete')) {
        console.log("image complete: true");
    } else {
        console.log("image complete: false");
    }
}).on('error', function() {
    console.log("image loaded error");
}).attr("src", imgUrl);

Edit1

$("#image1").on('load', function() {
    console.log("image1 complete: true " + this.width + "x" + this.height);
}).attr("src", imgUrl);
$('#image1')[0].decode().then(() => console.log('decoded'))

Редактировать2

$("#liveImage1").on('load', function() { 
    createImageBitmap(this).then(() => {
        console.log('Loaded');
    }).catch(() => {
        console.log('Failed');
    })
}).attr("src", imgUrl);

Answer 1

Вы можете использовать обработчик событий .load () , например:

$("#image1").on('load',function() {
  alert('I loaded!');
}).attr('src', 'image1.jpg');