Ответ хороший, но он вносит одну проблему. Всякий раз, когда вы назначаете onload или onerror напрямую, он может заменить обратный вызов, который был назначен ранее. Вот почему есть хороший метод, который "регистрирует указанного слушателя в EventTarget, для которого он вызывается" , как говорят в MDN . Вы можете зарегистрировать столько слушателей, сколько хотите на одном мероприятии.
Позвольте мне немного переписать ответ.
function testImage(url) {
var tester = new Image();
tester.addEventListener('load', imageFound);
tester.addEventListener('error', imageNotFound);
tester.src = url;
}
function imageFound() {
alert('That image is found and loaded');
}
function imageNotFound() {
alert('That image was not found.');
}
testImage("http://foo.com/bar.jpg");
Поскольку процесс загрузки внешних ресурсов является асинхронным, было бы еще лучше использовать современный JavaScript с обещаниями, такими как следующие.
function testImage(url) {
// Define the promise
const imgPromise = new Promise(function imgPromise(resolve, reject) {
// Create the image
const imgElement = new Image();
// When image is loaded, resolve the promise
imgElement.addEventListener('load', function imgOnLoad() {
resolve(this);
});
// When there's an error during load, reject the promise
imgElement.addEventListener('error', function imgOnError() {
reject();
})
// Assign URL
imgElement.src = url;
});
return imgPromise;
}
testImage("http://foo.com/bar.jpg").then(
function fulfilled(img) {
console.log('That image is found and loaded', img);
},
function rejected() {
console.log('That image was not found');
}
);