jQuery whole HTML page load with spinner

Question

I am trying to something simple -- make a jQuery script that will wait to show the entire page, including all DIVs, text, and images. While the page is loading, instead of showing parts of the page I would like to show a spinning GIF image, and when the entire page is loaded we can fade the contents of the page in the browser window.

There are plenty of scripts to load with an ajax request into a container DIV -- but this is different. This will show a spinning GIF while an HTML page is loading. Any help is appreciated

This type of script only works on ajax requests

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

score 44 · Accepted Answer · edited Apr 15 '18 at 22:36

44

$(document).ready(...) fires as soon the DOM is loaded. This is too soon. You should use $(window).on('load', ...):

JavaScript:

$(window).on('load', function(){
    $('#cover').fadeOut(1000);
})

CSS:

#cover {
    background: url("to/your/ajaxloader.gif") no-repeat scroll center center #FFF;
    position: absolute;
    height: 100%;
    width: 100%;
}

HTML:

<div id="cover"></div>
<!-- rest of the page... -->

look at this jsFiddle: http://jsfiddle.net/gK9wH/9/

edited Apr 15 '18 at 22:36

Rich

3,156
3
19
29

answered May 24 '12 at 17:54

AvL

3,083
1
28
39

yes, document ready fires too soon, and some elements might be mid way through rendering in the browser window and it will show this ... so how can we show the spinner first, and then hide it -- if we are waiting for the window to load? – user1317510 May 24 '12 at 17:58
yea. I see that works! But I do not see the spinner. maybe the spinner is hidden by the JSFiddle window scroll ? – user1317510 May 24 '12 at 18:27
It was because the image was not available any more! This works: http://jsfiddle.net/gK9wH/9/ (And don't forget to upvote or accept ;-) – AvL May 24 '12 at 18:32
Great jsFiddle. Helped a ton! – KateMak Jan 21 '16 at 23:36
position: fixed; if you don't want the rest of the page to show up upon scrolling. – T A Dec 22 '16 at 07:12

score 3 · Answer 2 · answered May 24 '12 at 19:00

I would cover the entire page with an overlay, and then remove the overlay once the page loads. You can tweak this to also show a loading.gif if you'd like. Here's an example:

HTML

<body>
<div id="container">
    <h2>Header</h2>
    <p>Page content goes here.</p>
    <br />
    <button id="remove_overlay">Remove Overlay</button>
</div>
</body>

CSS

#container{padding:20px;}

h2 {margin-bottom: 10px; font-size: 24px; font-weight: bold;}

#overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height:2305px !important; /*change to YOUR page height*/
        background-color: #000;
        filter:alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity: 0.5;
        opacity: 0.5;
        z-index: 998;
}
#remove_overlay{position:relative; z-index:1000;}

jQuery:

$(document).ready(function () { 

        // Set a variable that is set to the div containing the overlay (created on page load)
        var page_overlay = jQuery('<div id="overlay"> </div>');

        // Function to Add the overlay to the page
        function showOverlay(){
            page_overlay.appendTo(document.body);
        }
        // Function to Remove the overlay from the page
        function hideOverlay(){
            page_overlay.remove();
        }

        // Show the overlay.
        $(showOverlay);

       });
});

$(document).ready(function () { 
    $(hideOverlay);
});

You'll need to tweak this so that it loads the overlay as soon as the page is requested (tweak the $(showOverlay); call so that it fires before document is ready.

Here's a simple working fiddle with a button to remove the overlay. You should be able to go from there :) http://jsfiddle.net/3quN5/

score 2 · Answer 3 · answered May 24 '12 at 17:48

I think the best way would be to have a 'cover' div which will cover the whole page whilst it loads. It would be opaque, and would contain your GIF.

The following would then hide the div once the page has loaded:

$(document).ready(function() {
  // Hide the 'cover' div
});

The following would make the div the size of the page:

.div{
  height:100%;
  width:100%;
  overflow:hidden;
}

score 0 · Answer 4 · answered May 24 '12 at 17:53

0

First do you mean everything in the between the body tags? The best way to do the spinning gift is to add a class that defines the gif as none repeat and centered. The remove the class when the page is ready to be shown.

$('body').addClass('loading')
$('body').removeClass('loading')

This is always the best technique because if you submit something then try to add the gif through a DOM addition some browsers will not do it because the page has been submitted.

answered May 24 '12 at 17:53

Elliott

186
1
3
10

so, how would we do that exactly ? What I mean is ... how do we know when all bytes are loaded and it's time to remove the loading class and fade in the main part of the Body ? – user1317510 May 24 '12 at 18:12

jQuery whole HTML page load with spinner

4 Answers4

Linked