Replace the
IFRAME tag in that page with below HTML. The IFRAME is covered with a DIV where the loading image (or any image) is found. The image is at the center of the DIV area and its size can be up to 950x633 pixels. When the IFRAME page is loaded, the loading image will be hidden.
What you need to change is the image URL for your site. You might also want to change the
DIVbackground color (currently set to #FFF).
<style>
#loadImg{position:absolute;z-index:999;}
#loadImg div{display:table-cell;width:950px;height:633px;background:#fff;text-align:center;vertical-align:middle;}
</style>
<div id="loadImg"><div><img src="loading.gif" /></div></div>
<iframe border=0 name=iframe src="html/wedding.html" width="950" height="633" scrolling="no" noresize frameborder="0" onload="document.getElementById('loadImg').style.display='none';"></iframe>
Display animated gif before Iframe content is loaded
2 Comments | Share
If you are working with iframe in which the content takes time to load, you may want to display a simple loading indicator to the end users instead of letting the users see a blank screen in the page. To do this, here's one way on how to implemet it using javascript.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript">
function hideLoading() {
document.getElementById('divLoading').style.display = "none";
document.getElementById('divFrameHolder').style.display = "block";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divLoading">
<img src="images/ajax-loader.gif" alt="" />
</div>
<div id="divFrameHolder" style="display:none">
<iframe src="http://asp.net" onload="hideLoading()" frameborder="0">
</iframe>
</div>
</form>
</body>
</html>
What happened in the code above is we hide the container of Iframe (divFrameHolder) by setting the style to *display:none*. This is to ensure that the Iframe will not be seen if its content is not yet loaded on load of the page and instead show the animated gif (loading indicator). We then call the javascript method *hideLoading()* at onload event of Iframe to hide the animated gif when the content of the iframe is loaded.
No comments:
Post a Comment