测试是否使用JavaScript正确加载图像

我在几个应用服务器上部署了一个映像（绿色向上箭头：uparrow.gif）。我有一个应用程序服务器状态页面，其中列出了所有服务器，并有一个相应的图像，其中图像的来源是该服务器的uparrow.gif。如果图像没有加载（服务器关闭），我想切换到红色向下箭头（downarrow.gif）。有没有一种方法可以检查图像是否使用纯JavaScript加载（没有JS库等）？我可以想象我会设置一个间隔，让它继续检查用户是否在页面上。谢谢

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

编辑：

对于HTML中已经存在的图像，这变得有点棘手，因为OneError事件不仅仅是DOM的HTML的一部分。理论上，如果您不介意无效标记，可以这样做：

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

---

现在StackOverflow可以名副其实了。 下面的代码给出了IE中的stackoverflow，但它应该运行。 问题是什么？修好它，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>  

var超时=600000；//10分钟
var服务器={
server1:“//server1”，
server2:“//server2”
}//不是最后一个iterm后缺少逗号
var-tIds=[]；
函数loadImage（id）{
document.getElementById（id）.src=servers[id]+'/on.gif？timestamp='+new Date（）.getTime（）；//确保它不缓存
}
window.onload=function（）{
for（服务器中的var服务器）{
var img=document.createElement（'img'）；
img.id=服务器；
img.onload=函数（）{
clearTimeout（tIds[this.id]）；
tIds[this.id]=setTimeout（“loadImage（“+this.id+”），超时）；//10分钟后再次运行
} 
img.onerror=函数（）{
this.src=“off.gif”；
this.title='server off at'+new Date（）；
clearTimeout（tIds[this.id]）；
tIds[this.id]=setTimeout（“loadImage（“+this.id+”），超时）；//10分钟后再次运行
}//关闭不能来自损坏的服务器
document.getElementById（'imageContainer'）.appendChild（img）；
loadImage（服务器）
} 
}

只有CSS才能解决为死机服务器显示红色箭头和为活服务器显示绿色箭头的任务：

。不需要javascript，默认情况下会显示红色箭头，只有在服务器启动并运行时，绿色箭头才可见，而不是红色箭头

---

但如果你真的想使用js，那么onerror事件将有所帮助。

这似乎不太合适，我缺少什么？函数checkImg（）{var imgs=document.getElementsByTagName（“img”）；for（i=0；i