Page loading GIF - Could someone please explain the answer below?

Question

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.

@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, Jan 29 '13 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.com/ajax/default.ASP` In 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, Jan 29 '13 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 complete start of the page and then hide it once the page is ready. You can achieve this with JQuery — poudigne, Jan 29 '13 at 16:56
@PLAudet exactly, all I need is a loading GIF or show/hide div. — Omar, Jan 29 '13 at 17:17
on ajaxstart event just show the image and on success just hide the image — Ajay Beniwal, Jan 29 '13 at 17:27

score 2 · Answer 1 · answered Jan 29 '13 at 17:21

2

You will find everything you need here

http://mycodeprograms.blogspot.ca/2012/10/how-to-add-loader-while-page-load.html

answered Jan 29 '13 at 17:21

poudigne

1,694
3
17
40

@PLAudent Thanks a lot. The JS goes between tags or – Omar Jan 29 '13 at 17:42
To be W3C it should go between body tag, but – poudigne Jan 29 '13 at 18:17

eds · Answer 2 · 2013-01-30T22:50:24.750

2

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';
}

edited Jan 30 '13 at 22:50

answered Jan 29 '13 at 17:57

eds

449
2
10

Thanks @eds but it didn't work. The loading GIF isn't disappearing. – Omar Jan 30 '13 at 09:48
Sorry, the `'none'` should have had quotes around it. Maybe that will work? Sorry, I never actually tested the code but I'm pretty confident this method should work as I've implemented similar things... – eds Jan 30 '13 at 22:50
thanks. Please check my answer below, it works perfectly well. Even the hideloadgif() isnt important as it disappears by itself once the page loads. – Omar Jan 31 '13 at 08:52

score 2 · Accepted Answer · edited May 08 '13 at 19:24

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)
}

Page loading GIF - Could someone please explain the answer below?

3 Answers3