Что является противоположным событием для ошибки?

Question

У меня есть изображение, которое обновляется путем изменения src изображения с помощью JavaScript.Я добавил прослушиватель событий error, чтобы проверить, не повреждено ли изображение, а затем перезагрузить его, если оно есть.Но если он не сломан, я хочу удалить прослушиватель событий error.Кажется, не может понять правильное событие, противоположное onerror при работе с изображением.

<img src="path/to/img.jpg" id="img">

<script>
var img = document.getElementById('img');
var imgURL = "/path/to/new_img.png";
img.addEventListener('error', refresh);
img.src = imgURL;

function refresh(e) {
    img.src = imgURL;
    if(e.type !== "error") img.removeEventListener('error', refresh);
};
</script>

Последний оператор e.type !== error все еще попадает в функцию ошибки и поэтому остается false,Мне нужно что-то, что я могу вызвать, если событие не генерирует ошибку.Что-то вроде onsuccess, если есть что-то подобное.

Answer 1

Для этого конкретного случая противоположным является событие load, указывающее, что изображение загружено. Я довольно удивлен, что не нашел документально подтвержденных в MDN .

var img = document.getElementById('img');
var imgURL = "/path/to/new_img.png";
img.addEventListener('error', refresh);
img.addEventListener('load', refresh); // ***
img.src = imgURL;

тогда

function refresh(e) {
    img.src = imgURL;
    if (e.type !== "error") {
        img.removeEventListener('error', refresh);
        img.removeEventListener('load', refresh);
    }
}

Вы можете добавить некоторую логику тайм-аута и / или задержки, поскольку в противном случае это будет постоянно повторно запрашивать изображение до тех пор, пока оно не будет выполнено (что может никогда не произойти, если URL недействителен).