Правильный способ проверить наличие ошибок загрузки изображений и видео в Javascript?

Question

Типичный пример загрузки изображения в JS для рисования на холсте HTML5:

var canvas = $("#mycanvas")[0];
var context = canvas.getContext("2d");
var img = new Image();
img.src = 'URL HERE';
img.onload = function() {
    context.drawImage(img, 0, 0);
};

НО как нам справиться со случаем, когда изображение не удалось загрузить?

например, при загрузке данных JSON с JQuery есть .fail Способ обработки сбоев нагрузки:

$.getJSON(url)
    .done(function(data, statusText, jqXHR) {
        // data loaded ok
    })
    .fail(function(jqXHR, textStatus, errorThrown) {
        // error loading data - ERROR HANDLING HERE
    })
;

Отлично, но есть ли какой-то эквивалент в JS для обработки ошибок загрузки изображений? Есть ли какое-то другое событие, подобное .onload но что вызывает сбой при загрузке? Или делает .onload вызвать в любом случае?

Аналогичная проблема при загрузке видео в тег видео:

var videoElement = $("#myvideo")[0];
$("#mvideo").append("<source src='URL HERE' type='TYPE STRING HERE'>");
videoElement.load();
videoElement.play();

то есть как мы можем обнаружить сбой загрузки, чтобы мы могли добавить код обработки ошибок?

Answer 1

Да, используйте onerror имущество:

img.onerror = function() {
    this.src = "DEFAULT SOURCE FOR ERROR LOADED IMAGES";
}