Checking whether images loaded after page load

Question

Determining whether an image has loaded reliably seems to be one of the great JavaScript mysteries. I have tried various scripts/script libraries which check the onload and onerror events but I have had mixed and unreliable results.

Can I reliably just check the complete property (IE 6-8 and Firefox) as I have done in the script below? I simply have a page wich lists out servers and I link to an on.gif on each server. If it doesn't load I just want to load an off.gif instead. This is just for internal use...I just need it to be reliable in showing the status!!!

<script type="text/javascript">
var allimgs = document.getElementsByTagName('img');  


 function checkImages(){   
     for (i = 0; i < allimgs.length; i++){  
         var result = Math.random();  
        allimgs[i].src = allimgs[i].src + '?' + result;  
     }  
     serverDown();  
     setInterval('serverDown()',5000);  
}  


window.onload=checkImages;  

function serverDown(){  
     for (i = 0; i < allimgs.length; i++){  
        var imgholder=new Image();  
        imgholder.src=allimgs[i].src;   
        if(!allimgs[i].complete){  
            allimgs[i].src='off.gif';  
        }  
     }  
}  
</script>

Answer 1

have you checked : http://stackoverflow.com/questions/263359/how-can-i-determine-if-an-image-has-loaded-using-javascript-jquery