I found what I was looking for on this link How to show ajax loading gif animation while the page is loading? but I dont know how to implement this on my website.
I want a loading GIF to appear while the page loads and disappears by itself once the page is completely loaded with PHP results.
On the website I use one page template (index.php) and I have all data loaded in that page dynamically according to the user's query.
Thank you in advance.
Well, this is my solution.
1) CSS part
#loadgif {
padding-top:2px;
font: 10px #000;
text-align:center;
vertical-align:text-top;
height: 80px;
width: 130px;
/* Centering the div to fit any screen resolution */
top: 50%;
left: 50%;
margin-top: -41px; /* Div height divided by 2 including top padding */
margin-left: -65px; /* Div width divided by 2 */
position: absolute;
display: none; /* JS will change it to block display */
position: fixed;
z-index: 1000;
/* Loading GIF set as background of the div */
background: #FFF url('../img/loader.gif') 50% 75% no-repeat;
/* Misc decoration */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border:#7580a8 solid 1px;
}
2) HTML part
Place div tag within body tag anywhere.
<!-- With or without text -->
<div id="loadgif">Loading...</div>
3) Javascript part
I made two functions, one to show and another to hide the div.
<script type="text/javascript">
// Hide function by changing <div> style display attribute back to none
function hideloadgif() {
document.getElementById('loadgif').style.display = 'none';
}
// Show function by changing <div> style display attribute from none to block.
function showloadgif() {
document.getElementById('loadgif').style.display = 'block';
}
// Making sure that any other event running in the background isn't affected
if (window.addEventListener) { // Mozilla, Netscape, Firefox
window.addEventListener('load', WindowLoad, false);
} else if (window.attachEvent) { // IE
window.attachEvent('onload', WindowLoad);
}
// Call the hideloadgif() function on click event,
// with interval time set to 3 seconds to hide the <div>
function WindowLoad(click) {
setInterval("hideloadgif()",3000)
}
</script>
4) Showing the div. Call function showloadgif() using onlick="" event anywhere.
For example
<img src="abc/def.jpg" onlick="showloadgif()">
Once the image is clicked, the div will appear and at the same time, hideloadgif() will trigger and hides the div within 3 seconds.
function WindowLoad(click) {
setInterval("hideloadgif()",3000)
}
You will find everything you need here
http://mycodeprograms.blogspot.ca/2012/10/how-to-add-loader-while-page-load.html
When the page is completely loaded, the first thing that happens is the <body>'s onload event fires. This is where you make the image disappear.
For example, make the <body> tag look like this:
<body onload="makeLoadingGifDisappear()">
Somewhere in the page body give your GIF an ID:
<img src="loadinggif.gif" id="myLoadingGif">
Then in the page's JavaScript, make the makeLoadingGifDisappear function hide the GIF:
function makeLoadingGifDisappear() {
document.getElementById('myLoadingGif').style.display = 'none';
}