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 showi

Answer 1

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

​

    
Header
    
Page content goes here.
    

    Remove Overlay

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

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('
 
');

        // 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/ ​