Question

I use JQuery Ajax to get a table’s content from sever, using code like this:

success: function(data)
{
    //once I get the data, remove the old content from table
    $('.tableBody').empty();

    // then repopulate the table
    $.each(data, function(key,val) {
        //process the data, add different icons, texts...,append it to my table
        showTable(key, val);
   });
}

This works fine. but the problem is the table has many rows, so it takes about 300 millisecond to re-populate, (the empty() only take about 10 millisecond), so for a brief moment, the table is blank.

Is there anyway that I can add some animation between "empty()" and "showTable()" to avoid the blank screen so that it’s seamless transition?

Answer 1

After you receive your data in your AJAX callback (or even before that), show a loading animation, do your stuff, then show your form/table again.

Kind of a basic example.. On click of submit, show the loading animation, hide the form. Do your stuff (AJAX request), then hide the loading animation, and show the form again.

<img class="loading" src="http://www.link-to-loading-anim.com/loading.gif"/>
    <form method="post">
    <input value="Click Me" type="submit"/>
</form>​

The Javascript:

// On dom ready, hide our loading animation
$('img.loading').hide();

// on form submit, show the animation,
$('form').submit(function(e){
    e.preventDefault(); // we dont really need to submit the form!!

    // Show our loading animation
    $('img.loading').fadeIn();

    // Optional: Hide the form..
    $('form').hide();

    // Do something here.. (AJAX Request)
    // - Your success of AJAX request..

    // Hide the image loader on success.. (setTimeout used for demo purposes)
    setTimeout(hideImageLoader, 2000);

});

function hideImageLoader(){
    $('img.loading').fadeOut('slow', function(){
        $('form').show();
    }); 
}
​

Here is a JSfiddle for a basic loading animation example.