This generally works:
Code:
<script type="text/javascript">
var ims, preloadedimages;
function setItUp(){
if(document.getElementById&&document.images){
document.write('<style type="text/css">\
#someID {\
visibility:hidden;\
}\
<\/style>')
ims=new Array()
//define images. You can have as many as you want:
ims[0]="image1.jpg"
ims[1]="image2.jpg"
ims[2]="image3.jpg"
preloadedimages=new Array()
for (var i=0;i<ims.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=ims[i]
}
}
}
setItUp();
function reveal(){
if(!document.images||!document.getElementById)
return;
for (var i_tem = 0; i_tem < preloadedimages.length; i_tem++)
if (typeof preloadedimages[i_tem].complete=='boolean'&&!preloadedimages[i_tem].complete){
setTimeout("reveal();", 2000)
return;
}
document.getElementById('someID').style.visibility='visible';
}
</script>
Configure your images in the above where indicated.
Wrap the problematic HTML code on your page that requires the images be loaded in a div:
Code:
<div id="someID">
Problematic HTML goes here
</div>
Add reveal(); to your page's onload event(s).
Bookmarks