Display AJAX loading Image during loading heavy website using javascript
In this article, I will explain how to display AJAX loading image during loading of heavy webpage using JavaScript. Here JavaScript is used to display Ajax loading image for 5 seconds and hides the loading content of the website for 5 seconds.
Display AJAX loading Image during loading of heavy webpage using javascript
As the article name says displaying AJAX loading image during loading of heavy website using JavaScript, during loading of large image sized content website it will be displayed partial content of the website to the user, so to prevent that to be visible to the user I used Ajax loading image to show that the page is loading and hiding the website content for 5 seconds during loading. User must be intimated by showing Ajax image as the page loading take 5 seconds. In this article, I had explained about showing AJAX image for 5 seconds on that time content of the webpage is hided and after 5 seconds the content will be displayed.
Following is the code of div tag and id is myDiv which contains loading image. This loading image will be displayed for 5 seconds.
<div id="myDiv" valign="center" align="center" style="height: 800px; display: none;">
<table>
<tr>
<td style="height: 250px">
</td>
</tr>
<tr>
<td>
<img id="myImage" src="images/ajax-loader.gif" />
</td>
</tr>
</table>
</div>
Following is the javascript code for displaying div tag which contains AJAX loading image by setting style to block which enable loading image to display and after 5 seconds it will disapper by setting div tag style to none. So when page loads this function will run automatically display loading image for 5 seconds. Assigning div tag id myDiv to var myDiv. Two functions are used, show and hide in which show function is used to display the loading image and hide function is used to fade the loading image after 5 seconds. setTimout calls hide function after 5 seconds.
<script type="text/javascript">
(function()
{
//get the element div tag contains loading image
var myDiv = document.getElementById("myDiv");
//declare show fuction
var show = function()
{
//assign div tag to display as block
myDiv.style.display = "block";
//calls a function for 5 seconds
setTimeout(hide, 5000); // 5 seconds
}
//declare hide fuction
var hide = function(){
//assign div tag to none
myDiv.style.display = "none";
}
show();
})();
</script>
Below is the Full Sample code as follows
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Sample</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="myDiv" valign="center" align="center" style="height: 800px; display: none;">
<table>
<tr>
<td style="height: 250px">
</td>
</tr>
<tr>
<td>
<img id="myImage" src="images/ajax-loader.gif" />
</td>
</tr>
</table>
</div>
<script type="text/javascript">
(function()
{
//get the element div tag contains loading image
var myDiv = document.getElementById("myDiv");
//declare show fuction
var show = function()
{
//assign div tag to display as block
myDiv.style.display = "block";
// setTimecout calls hide function after 5 seconds
setTimeout(hide, 5000); // 5 seconds
}
//declare hide fuction
var hide = function(){
//assign div tag to none
myDiv.style.display = "none";
}
show();
})();
</script>
// content starts here
<div id="container">
<img id="Img1" src="images/image.jpg" alt="image" height="700" width="1000" />
<img id="Img2" src="images/image1.jpg" alt="image" height="700" width="1000" />
<img id="Img3" src="images/image2.jpg" alt="image" height="700" width="1000" />
<img id="Img4" src="images/image3.jpg" alt="image" height="700" width="1000" />
<img id="Img5" src="images/image4.jpg" alt="image" height="700" width="1000" />
<img id="Img6" src="images/image5.jpg" alt="image" height="700" width="1000" />
<img id="Img7" src="images/image6.jpg" alt="image" height="700" width="1000" />
<img id="Img8" src="images/image7.jpg" alt="image" height="700" width="1000" />
<img id="Img9" src="images/image8.jpg" alt="image" height="700" width="1000" />
<img id="Img10" src="images/image9.jpg" alt="image" height="700" width="1000" />
<img id="Img11" src="images/image10.jpg" alt="image" height="700" width="1000" /> </div>
<!--content ends here-->
// following javascript is used to hide the container of the webpage for 5 seconds SO that partial loading of content is not displayed to the user.
<script type="text/javascript">
var sess = '<%=HttpContext.Current.Session["test5"]%>';
if(!sess)
{
(function()
{
var mycontainer = document.getElementById("container");
var hide = function()
{
//hiding the container for 5 seconds
mycontainer.style.display = "none";
setTimeout(show, 5000); // 5 seconds
}
var show = function(){
mycontainer.style.display = "block";
}
hide();
})();
}
else
{
}
</script>
</form>
</body>
</html>
Please Find attachment of full code for reference.