title: show loading image while javascript has heavy load
body: <p>I have an ajax code in my page that fetches a pretty large dataset(<code>&lt;table&gt;</code>) in my html page. After finishing with this, I do heavy work on this table (initialize it with <a href="https://www.datatables.net/" rel="nofollow noreferrer">datatables</a>, adding click handlers on rows, show hide columns etc) witch takes a significant amount of time. </p>
  
  <p>During this time where the initialization is going on, it feels like the page is stuck. Can I show a loading image using another thread maybe and dismiss it when the computation finishes?</p>
  
  <p>I came across this <a href="https://stackoverflow.com/questions/30036/javascript-and-threads">JavaScript and Threads</a> which is an old question on SO and says that Threads in javascript are not fully supported by all web browsers (ie's need gears plugin). </p>
  
  <p>Is there anything new that can help me do what I want and it is cross browser? Maybe some JQuery plugin or something that I am unaware of?</p>
  
  <p><strong>UPDATE</strong>
  This is my code so far :</p>
  
  <p>Html:</p>
  
  <pre><code>            &lt;div id="ajDiv"&gt;
                  &lt;div id="ajaxDiv1" class="ajaxDiv"&gt;&lt;/div&gt; 
                  &lt;div id="tmpContainer" style="display:none;"&gt;&lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>        function postForm(){
  
              $.ajax({
                  type: 'POST',
                  url: 'ajax.jsp',
                  data: { 
                  },
                  beforeSend:function(){
                      $('#ajaxDiv1').html('&lt;div class="loading"&gt;&lt;img src="../images/ajax_loader.gif" alt="Loading..." /&gt;&lt;/div&gt;');
                      $('#ajaxDiv1').show();
                      $('#tmpContainer').hide();
                  },
                  success:function(data){
  
                      $('#tmpContainer').html(data);
  
                      //UNTILL HERE EVERYTHING WORKS FINE
                      //FROM NOW ON THE PAGE FREEZES UNTILL THE
                      //DATATABLES INITIALIZE FULLY 
  
                      oTable = $('#example').dataTable({
                          "aaSorting": [[ 1, "asc" ]],
                          "bJQueryUI": "true" ,
                          "sPaginationType": "full_numbers",
                          "iDisplayLength": 100,
                          "aoColumns": [
                              null,null,null,null,null,null,null,null,null,
                              null,null,null,
                              { "sType": "date-euro" },
                              null,null,
                              { "sType": "date-euro" },
                              null,null
                          ]
                      }).columnFilter();
  
  
                      /* Add a click handler to the rows */
                      $("#example tbody").on("click",function(event) {
                          $(oTable.fnSettings().aoData).each(function (){
                              $(this.nTr).removeClass('row_selected');
                          });
                          $(event.target.parentNode).addClass('row_selected');
                      });
                      $("#example").on("dblclick", "tr", function() {
                          var iPos = oTable.fnGetPosition( this );
                          var aData = oTable.fnGetData( iPos );
                          var iId = aData[1];
                          $('#edit'+iId).click(); //clicks a button on the first cell
                      });
  
                      //MORE CODE HERE ...................
  
  
                      $('#ajaxDiv1').hide();
                      $('#tmpContainer').show();
                      $('#example').css('width', '100%').dataTable().fnAdjustColumnSizing();
                  },
                  error:function(){
                      $('#ajaxDiv1').html('&lt;p class="errorMsg"&gt;&lt;strong&gt;Oops!&lt;/strong&gt; Try that again in a few moments.&lt;/p&gt;');
                  }
              });
          }
  </code></pre>