<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>Iframe Loading Notice - Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #holder, #holder iframe { position:relative; width:500px; height:400px } #loading { height:50px; width:125px; padding:1ex; position:absolute; top:50%; left:50%; margin-top:-25px; margin-left:-63px; display:none; border:2px groove gray; background-color:#cccccc; color:#333333; } </style> <script type="text/javascript"> var loadit=function(){ var f=document.getElementById('myframe'), l=document.getElementById('loading').style; l.display='block'; if(f.onload==null){ f.onload=function(){l.display='none'}; if(window.attachEvent) f.attachEvent('onload', f.onload); } return true; } </script> </head> <body> <div id="holder"> <iframe id="myframe" name="myframe" src="about:blank" scrolling="auto" frameborder="1"></iframe> <div id="loading">Loading . . .</div> </div> <a href="http://www.google.com/" target="myframe" onclick="return loadit();">Google</a><br> <a href="http://www.dynamicdrive.com/" target="myframe" onclick="return loadit();">Dynamic Drive</a> </body> </html>
Thank you for the original post(http://www.dynamicdrive.com/forums/showthread.php?t=22759).
And I modified this according to my need as below:
<style type="text/css">
#holder, #holder iframe {
position:relative;
width:500px;
height:400px
}
#loading {
<!--height:50px;
width:125px;
padding:1ex;
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-63px; -->
display:none;
<!--border:2px groove gray;
background-color:#cccccc;
color:#333333; -->
}
</style>
<script type="text/javascript">
var loadit=function(){
var f=document.getElementById('iframemap'), l=document.getElementById('loading').style;
l.display='block';
if(f.onload==null){
f.onload=function(){l.display='none'};
if(window.attachEvent)
f.attachEvent('onload', f.onload);
}
return true;
}
</script>
And what you need is spinning.gif image.
<div id="holder">
<iframe name="iframemap" id="iframemap" width="550" height="450"></iframe>
<div id="loading"> <img src="images/busy.gif"></div>
</div>
Cheers !!
