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事件不仅仅是DOM的HTML的一部分。从理论上讲，如果你不介意无效标记，你可以做这样的事情：

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

Answer 2

现在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>

Answer 3

您为死亡服务器显示红色箭头并显示活动服务器的绿色箭头的任务仅可通过CSS解决：<img src="http://server/greenarrow.gif" style="background:url(local/redarrow.gif)"/>。不需要javascript，默认情况下会显示红色箭头，只有服务器启动并运行时，绿色箭头才会显示而不是红色箭头。

但是如果你真的想和js一起去，那么onerror事件会有所帮助。

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

3 个答案: