測試使用JavaScript正確加載的圖像

我在多個應用程序服務器上部署了一個映像（綠色向上箭頭：uparrow.gif）。我有一個應用程序服務器狀態頁面，其中列出了所有服務器以及相應的映像，其中映像的源代碼是該服務器的uparrow.gif。如果圖像不加載（服務器關閉），我想切換到紅色向下箭頭（downarrow.gif）。有沒有一種方法來檢查圖像是否加載或沒有直接的JavaScript（沒有JS庫等）？我想我會設置一個間隔讓它繼續檢查用戶是否在頁面上。謝謝。測試使用JavaScript正確加載的圖像

來源

2010-04-20 johkar

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'">

來源

2010-04-20 15:29:56 RoToRa

這似乎並不正確，我錯過了什麼？ function checkImg（）{ \t var imgs = document.getElementsByTagName（「img」）; （i = 0; i johkar 2010-04-20 15:57:56

啊，好的，你已經得到了HTML中的圖像。請參閱編輯... – RoToRa 2010-04-20 21:19:17

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

來源

2010-04-23 10:10:06 mplungjan

您顯示爲死者服務器紅色箭頭和表示活的綠色箭頭的任務是可以解決的，只有CSS：<img src="http://server/greenarrow.gif" style="background:url(local/redarrow.gif)"/>。不需要JavaScript，默認情況下會顯示紅色箭頭，並且只有服務器啓動並運行時，綠色箭頭纔會顯示，而不是紅色箭頭。

但是如果你真的想用js去，那麼onerror事件會有所幫助。

來源

2010-04-23 10:17:26 n1313

測試使用JavaScript正確加載的圖像

回答

相關問題