Skip to main content

Display animated gif before Iframe content is loaded

Display animated gif before Iframe content is loaded

 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="ajax-loader.gif" alt="" />
    </div>
    <div id="divFrameHolder" style="display:none">
        <iframe src="http://asp.net" onload="hideLoading()" frameborder="1" scrolling="no">
      
        </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.
 

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

PNR Status by web Scraping Method (ASP.NET) C#

To Get the PNR Status by web Scraping Method Steps to Execute the Function Step 1 : Add the below method in your Form and Pass the PNR Number arguement public string GetPNRStatus( string sPNR) { string URI = "http://www.indianrail.gov.in/cgi_bin/inet_pnrstat_cgi.cgi" ; string Parameters = Uri .EscapeUriString( "lccp_pnrno1=" +sPNR+ "&amp;submitpnr=Get Status" ); System.Net. HttpWebRequest req = ( HttpWebRequest )System.Net. WebRequest .Create(URI); //HTTP POST Headers req.ContentType = "application/x-www-form-urlencoded" ; req.Host = "www.indianrail.gov.in" ; //You can use your own user-agent. req.UserAgent = "Mozilla/5.0 (compatible; MSIE 7.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0) DELL;Venue Pro" ; req.Headers.Add( HttpRequestHeader .AcceptLanguage, "en-us,en;q=0.5" ); req.Headers.Add( HttpRequestHeader .AcceptCharset, "ISO-8859-1,utf-8;q=...
20 comments
Read more

SonarQube Configuration For .NET Core Web API

When multiple developers are working on the same project, it's good to have a code review. SonarQube is a tool through which we can evaluate our code. Here, for demo purposes, we are going to evaluate the web API which is built on .NET Core. Let's see step by step implementation. In order to run SonarQube, we need to install JAVA in our local system.   Refer to the below link to download JAVA installer and install JAVA. https://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html Configure the 'PATH' system variable under environment variables Go to Control Panel > System > Advanced System Settings, it will open the System Properties window. Click on the "Environment Variables" button. Click on the "View" button under User Variables. Give the variable name as 'JAVA_HOME'. The variable value will be your JDK path where you installed JAVA. Select path variable under system variable and click o...
Post a Comment
Read more

Authentication ASP.NET_SessionId (Session) along with AuthToken (GUID) cookie

Authentication ASP.NET_SessionID (Session) along with AuthToken (GUID) cookie Introduction ASP.NET Session keeps track of the user by creating a cookie called  ASP.NET_SessionId  in the user browser. This cookie value is checked for every request to ensure that the data being served is specific to that user. In many applications, a Session variable is used to track the logged in user, i.e., if a session variable exists for that user, then the user is logged in, otherwise not. Background Whenever any data is saved into the Session, the  ASP.NET_SessionId  cookie is created in the user’s browser. Even if the user has logged out (means the Session data has been removed by calling the  Session.Abandon() or  Session.RemoveAll()  or  Session.Clear()  method), this  ASP.NET_SessionId  cookie and its value is not deleted from the user browser. This legitimate cookie value can be used by the hijacker to hijack the user session by g...
Post a Comment
Read more