show loading.gif while javascript method runs

Question

I wanna see a loading.gif while my table is created by my javascript method. this is what I have:

JS Code

$('body').bind('loading.start', function(event){
        $('img#loading').show();
});


$('body').bind('loading.end', function(event){
        $('img#loading').hide();
});



createTable = function(){
  $('body').trigger();
  setTimeout(function() { createTableContent(); }, 5000);
}

this is my loading gif :

http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_gray_512.gif

the problem is that gif appears, but it doesn't spin while the javascript method runs.

what should I do?

Answer 1

This is because Javascript is a single process scripting. That is why the browser is blocking the UI updates and so does not update your image.

You should consider using a background worker (HTML5) to process the data in a different thread and this way your loader does work.

Another option is to speed up you content change to a few ms. I don't know what your processing does. Maybe I can look in to it and see if I can speed it up.

Answer 2

Web Workers is the solution but if u have not used it before go for

parallel.js (a small framework to achieve parallel processing)

http://adambom.github.io/parallel.js/

Advantages:

1. It is tiny
2. Easy to use (with good documentation)

Answer 3

Could you just create a div wrapper for the table that has the loader as a background image? Then make your table background white so it will hide the loader... Something like this maybe:

<div id="WRAP" style="width:400px; height:auto; background:url('http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_gray_512.gif') 50% 50% no-repeat; background-size:60px 60px;">

  <table style="background:#FFF; width:100%;">
    <tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
  </table>

</div>