Preloader for dynamic content

Question

Hello,

I have dynamic page which takes about 8 seconds to load searched data.

Problem is, all browsers remain on old page for those 8 secs & show dynamic page only after it

loads completely.

What I want is preloder image to be shown to the customers until second page gets load.

How can I achieve this?

Thanks

Answer 1

I assume you are loading the second page through AJAX. If so, you'll only be able to display the results after the asynchronous call returns.

However, nothing prevents you from making changes to the page before sending off the AJAX request. The basic structure will be:

var preload = $('<div></div>').text('I am preloading!').insertAfter('somewhere');
$.get(..., function() {
    preload.remove();
    // insert your real content, received from this AJAX request
});

Answer 2

$('<div id="busy">Loading...</div>')
        .ajaxStart(function() {$(this).show();})
        .ajaxStop(function() {$(this).hide();})
        .appendTo('body');

That's all!

You may want to add some style to #busy tag, but this you can do with CSS.