Проверьте, не загружено ли изображение

Question

У меня есть страница с большим количеством изображений. Мои изображения загружаются с внешнего сервера. Обычно этот сервер загружает tooooooooo медленно, поэтому моя страница остается загружаемой, пока внешний сервер не запустится снова. Я хочу поместить пустую картинку, загруженную у меня, когда внешний сервер отключен.

Есть ли способ сделать что-то подобное?

if ($("img").load=false) { 
$("img").src="cantload.png"; 
} 

Большое вам спасибо, заранее!

Answer 1

Если вы используете jquery, и этот фрагмент кода происходит до привязки изображения.

$("img").error(function() { 
    alert("Could not load image"); 
}); 

Если нет, то вы могли бы сделать что-то вроде этого, который всегда будет работать, но должны быть на каждом изображении:

<img src="image.gif" onerror="alert('Could not load image.')"> 

Answer 2

Если вы хотите, чтобы активировать эту функцию после того, как элементы уже в 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); 
}); 

Приведенный выше код привяжет внутреннюю функцию к обработке ошибок загрузки изображений, а затем заставит их перезагрузить. Фотографии, которые уже Reloaded не будет на самом деле перезагружается снова, но те, с ошибками будет вызывать обработчик ошибок и изменить source attribute в cantload.png

jsFiddle Demo