Display loading spinner as a page loads

I would like to overlay a loading gif over my page contents as they load. They are not loaded via ajax ho开发者_如何转开发wever and I have seen several solutions to display via that channel. The issue is that a jQuery table is populated with search results and the table can take a decent time to render if a lot of results are returned via MySql. I would like an overlay over the page to sort of hide the rendering of Javascript and jQuery. Can someone explain how to accomplish this or point me to a great tutorial. Remember, the page contents are not loaded from an external source (minus database values which are populated with PHP variables).

If you have a wrapper div, add display:none or opacity:0 and about the wrapper div put the spinny loader.

not in your jQuery add something like this:

$(document).ready(function(){
    $('#wrapper').show();
});

you can also add some animations as well instead of show()

If you are waiting for the server to finish computing the page and you are using PHP then you can use the PHP function ob_flush() to flush the output buffer.

Provide the html code to show the loader then flush the buffer. Then run your database queries that take some time. You can flush the buffer as often as you'd like to possibly give status updates on the load progress as well.

Try this

.loading
{
    background-image: url('loadingImage.png');
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    color: #000000;
    padding: 10px 30px;
    position: absolute;
    text-align: center;
    width:100px;
    z-index:100;
}

$(document).ready(function(){
    $('#wrapper').append("<div class='loading' />").fadeIn();
});