Geeks With Blogs

News

Microsoft MVP


DZone MVB


Moderator at CodeASP.NET


Quiz Master







free counters
Free counters
Added on January 19,2012


Follow Me @vmsdurano

A bit About Me



Disclaimer
The opinions expressed herein are my own personal opinions and does not represent the opinions of my employers. Nor does it represent the opinion of my dog, because I don’t have one.


Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

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.

 

I hope someone find this post useful!

Technorati Tags: ,,
Posted on Tuesday, July 13, 2010 8:31 PM ASP.NET , JavaScript , Tips&Tricks | Back to top


Comments on this post: Display animated gif before Iframe content is loaded

# re: Display animated gif before Iframe content is loaded
Requesting Gravatar...
Works Perfectly Even on every upto date browser

Thankyou Very Much
Left by Fibrewire on Oct 19, 2010 10:16 PM

# re: Display animated gif before Iframe content is loaded
Requesting Gravatar...
I used this article and it seemed it preety useful. However, I needed to show this loading image while some controls are being loaded, not a url. My controls are being populated by data coming from a DB and as it is of a large quantity the screen remains blank for a while.
Thanks in advance
Left by Rohan on Jan 25, 2011 4:42 PM

# re: Display animated gif before Iframe content is loaded
Requesting Gravatar...
Good one. Cheers
Left by Raj on Feb 14, 2011 9:29 PM

# re: Display animated gif before Iframe content is loaded
Requesting Gravatar...
Man you saved me so much heart ache trying to figure this out, thanks !
Left by Steve on Dec 23, 2012 3:37 PM

# re: Display animated gif before Iframe content is loaded
Requesting Gravatar...
Thanks every much
Left by Hello on Feb 03, 2013 6:24 AM

comments powered by Disqus

Copyright © Vincent Maverick Durano | Powered by: GeeksWithBlogs.net