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 pletely 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.
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 pletely 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.
Share Improve this question edited May 23, 2017 at 11:53 CommunityBot 11 silver badge asked Jan 29, 2013 at 15:53 OmarOmar 31.7k9 gold badges72 silver badges116 bronze badges 5- @PLAudet no I have not, because I couldn't understand it. I seek someone's help in simplifying the answer. Why do I need to call another .php file? – Omar Commented Jan 29, 2013 at 16:31
-
Well after taking a look at your link, what they are doing is they are displaying a loading gif while they are waiting for the callback of their ajax Call. If you don't know what AJAX is you may want to take a look at
http://www.w3schools./ajax/default.ASPIn your case you may not need to make an AJAX call so you don't call another file. Edit your post with more explanation of what you are trying to do. – poudigne Commented Jan 29, 2013 at 16:46 - I mean... in your case you don't need to call another PHP file. What you basically want to do is to show a loading GIF at the plete start of the page and then hide it once the page is ready. You can achieve this with JQuery – poudigne Commented Jan 29, 2013 at 16:56
- @PLAudet exactly, all I need is a loading GIF or show/hide div. – Omar Commented Jan 29, 2013 at 17:17
- on ajaxstart event just show the image and on success just hide the image – Ajay Singh Beniwal Commented Jan 29, 2013 at 17:27
3 Answers
Reset to default 2You will find everything you need here
http://mycodeprograms.blogspot.ca/2012/10/how-to-add-loader-while-page-load.html
When the page is pletely 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';
}
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)
}