show loading image while javascript has heavy load

Question

I have an ajax code in my page that fetches a pretty large dataset( <table> ) in my html page. After finishing with this, I do heavy work on this table (initialize it with datatables , adding click handlers on rows, show hide columns etc) witch takes a significant amount of time.

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?

I came across this JavaScript and Threads 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).

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?

UPDATE This is my code so far :

Html:

            <div id="ajDiv">
                <div id="ajaxDiv1" class="ajaxDiv"></div> 
                <div id="tmpContainer" style="display:none;"></div>
            </div>

JS:

        function postForm(){

            $.ajax({
                type: 'POST',
                url: 'ajax.jsp',
                data: { 
                },
                beforeSend:function(){
                    $('#ajaxDiv1').html('<div class="loading"><img src="../images/ajax_loader.gif" alt="Loading..." /></div>');
                    $('#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('<p class="errorMsg"><strong>Oops!</strong> Try that again in a few moments.</p>');
                }
            });
        }

Answer 1

Your structure should be like this

    showLoader();
    $.ajax({
        url: '',
        dataType: '',
        async: false,    //<-- this depends on your needs.
        success: function(dataObj) {
                    //Do you initialization of datatables
                    hideLoader();
        },
    });

I believe this serves your needs. I believe it should not be asynchronous because you want the table to be there and ready before letting the user do anything. Although you could make it asynch if you don't do much after the ajax call. You don't need threads for this. ajax is asynchronous by default if you want to do something when you are waiting for the ajax (initialization of datatables included) to finish

EDIT showLoader and hideLoader are your functions for showing and hiding the image

UPDATE

The only thing new is html5 web workers But I don't think it's worth it. It's not fully supported yet.

Answer 2

I use [this plugin] in our project.

It's easy to use.

jQuery('#activity_pane').showLoading();
jQuery('#activity_pane').load(
    '/path/to/my/url', 
    {},
    function() {
      //
      //this is the ajax callback 
      //
      jQuery('#activity_pane').hideLoading();
    }
);

http://thisiscontext.com/tools/jQuery-showLoading