Checking whether images loaded after page load
- by johkar
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>
