загрузка междоменного изображения javascript -> проверка успешной загрузки загружаемого изображения

#javascript

Вопрос:

Я должен загрузить изображение с другого сайта (междоменный)

мой вопрос в том, могу ли я как-то проверить, успешно ли загружено изображение?

Ответ №1:

Обычно вы помещаете это в прослушиватель событий загрузки следующим образом:

 var img = new Image();
img.onload = function(){
    alert(this.src   " loaded");
}
img.src="http://example.com/images/a.png";

1. необходимо ли новое изображение ()? если это так — почему? если это не так — почему?

2. @MorSela Да, это необходимо. Вам нужно создать новый объект изображения, но на данный момент ничего не загружается. Как только вы дадите ему souce, он начнет загружаться. Если вы просто назначаете URL-адрес, js предполагает, что вам нужна просто строка, а не изображение.

3. Переместите функцию onload выше настройки свойства src — кэшированные изображения могут запускать загрузку мгновенно, до того, как будет установлен обработчик события onload.

4. @Greg спасибо вам за эту информацию! Я изменю его прямо сейчас.

Ответ №2:

Для Javascript проверьте это

http://www.sajithmr.me/javascript-check-an-image-is-loaded-or-not

Я знаю, как обходиться с jQuery.

 $('#image1')
.load(function(){
    $('#result1').text('Image is loaded!'); 
})
.error(function(){
    $('#result1').text('Image is not loaded!');
});

Ответ №3:

Если вы загружаете изображение в html-тег, вы можете использовать onerror событие. Например:

<img src="https://otherdomain.com/img.jpg" onerror="handleImgError();" />

Если handleImgError() выполняется, то вы знаете, что изображение не загрузилось должным образом.

1. если я этого не сделаю, я не смогу сделать что-то подобное в чистом js?

2. Вы можете использовать объект Image, упомянутый в ответе Джозефа, и использовать img.complete , который возвращает логическое значение true, если браузер завершил загрузку изображения. Вы также можете использовать onerror() метод, который будет очень похож на HTML, показанный выше.