Question

I want to show preload image while main page is preparing and then loading. I think I can’t use Ajax, because I need to reload whole main page. I want to implement next: First, I request the preload page and a server sends me it. Second, the server start to form main page(It takes about 15-20 seconds).
Third, when the server ends his work it send me the main page. But how can I implement 3rd part?

The second idea is separate the main page on 2 parts. One of them is the preload page which contains whole main page’s contents without 'busy time' contents. And then use Ajax to load 'busy time' contents.

What do you think, colleagues?

Answer 1

Try this. You’ll need a loading spinner element. Also, the $(function(){}); activate when the DOM (html structure) is loaded. That’s the closest you’ll ever get to when the visitor first reaches the page. The body element is hidden, then waits till all the images and everything all fully rendered and the CSS and Javascript files are loaded and working, then it crossfades from the spinner to the content and removes the spinner.

$(function(){
    $('body').hide();
    $('html').append('<div id="loading-spinner"></div>');
    $('body').load(function(){
        $('#loading-spinner').fadeOut('fast').remove();
        $(this).fadeIn('fast');
    });
});

You’ll need some CSS to apply a GIF to the background of the loading spinner element and center it:

#loading-spinner {
    width:100px;
    height:100px;
    background:url(loading.gif);
    left:50%;
    margin-left:-50px;
    top:50%;
    margin-top:-50px;
}