Проверьте, правильно ли загружено изображение с помощью JavaScript

Question

У меня есть изображение, развернутое на нескольких серверах приложений (зеленая стрелка вверх: uparrow.gif). У меня есть страница состояния сервера приложений, где я перечисляю все серверы и с соответствующим изображением, где источником изображения является uparrow.gif для этого сервера. Если изображение не загружается (сервер отключен), я хотел бы переключиться на красную стрелку вниз (downarrow.gif). Есть ли способ проверить, загружается ли изображение с прямым JavaScript (без библиотек JS и т. Д.)? Я полагаю, я бы установил интервал, чтобы он продолжал проверять, был ли пользователь на странице. Спасибо.

Answer 1

var image = new Image();
image.onload = function() {
   // display green arrow
}
image.onerror = function() {
   // display red arrow
}
image.src = 'http://yourserver/test.gif';

РЕДАКТИРОВАТЬ:

С изображениями, уже находящимися в HTML, это становится немного сложнее, потому что событие onerror не является частью HTML только DOM. Теоретически вы можете сделать что-то подобное, если не возражаете против неверной разметки:

<img src="http://yourserver/up_arrow.png" onerror="this.src='down_arrow.png'">

Answer 2

Ваша задача отображения красной стрелки для мертвых серверов и отображения зеленой стрелки для живых серверов решаема только с помощью CSS: <img src="http://server/greenarrow.gif" style="background:url(local/redarrow.gif)"/>. Нет необходимости в JavaScript, красная стрелка будет отображаться по умолчанию, и только если сервер запущен и работает, вместо красной стрелки будет видна зеленая стрелка.

Но если вы действительно хотите использовать js, то событие onerror поможет.

Answer 3

Теперь StackOverflow может соответствовать своему названию.Следующий код дает стекопоток в IE, но он ДОЛЖЕН выполняться.В чем проблема?исправить это, и у JOHKAR есть решение

<script>
var timeout = 600000; // 10 minutes 
var servers = {
server1:'//server1',
server2:'//server2'
} // not the lack of comma after the last iterm

var tIds = [];
function loadImage(id) {
  document.getElementById(id).src=servers[id]+'/on.gif?timestamp='+new Date().getTime(); // make sure it does not cache
}
window.onload=function() { 
  for(var server in servers){
    var img = document.createElement('img');
    img.id=server;    
    img.onload=function(){
      clearTimeout(tIds[this.id]); 
      tIds[this.id]=setTimeout("loadImage('"+this.id+"')",timeout); // run again in 10 minutes  
    } 
    img.onerror=function(){ 
      this.src="off.gif";
      this.title = 'server off at '+new Date();
      clearTimeout(tIds[this.id]); 
      tIds[this.id]=setTimeout("loadImage('"+this.id+"')",timeout); // run again in 10 minutes
    } // off cannot come from the broken server
    document.getElementById('imageContainer').appendChild(img);
    loadImage(server) 
  } 
}
</script>
<div id="imageContainer"></div>