У меня есть страница с большим количеством изображений. Мои изображения загружаются с внешнего сервера. Обычно этот сервер загружает tooooooooo медленно, поэтому моя страница остается загруженной до тех пор, пока внешний сервер не запустится снова. Я хочу поместить пустую картинку, загруженную у меня, когда внешний сервер отключен.
Есть ли способ сделать что-то подобное?
if ($("img").load=false) {
$("img").src="cantload.png";
}
Огромное спасибо заранее!
Если вы используете jquery, и этот фрагмент кода происходит до привязки изображения.
$("img").error(function() {
alert("Could not load image");
});
Если нет, то вы можете сделать что-то вроде этого, которое всегда будет работать, но должно быть на каждом изображении:
<img src="image.gif" onerror="alert('Could not load image.')">
Если вы хотите активировать эту функцию после того, как элементы уже находятся в DOM, вы можете использовать что-то вроде этого.
var defaultSource = 'cantload.png';
$('img').each(function() {
var originalSource = $(this).attr('src');
$(this)
.attr('src', defaultSource)
.error(function(){
$(this).attr('src', defaultSource );
})
.attr('src', originalSource);
});
Вышеприведенный код привяжет внутреннюю функцию к обработке ошибок загрузки изображений, а затем заставит их перезагрузить. Картинки, которые уже перезагружены, снова не будут перезагружены, но те, у кого есть ошибки, cantload.png
обработчик ошибок и изменят source attribute
в cantload.png