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>');
                }
            });
        }

refer this http://stackoverflow.com/questions/3535020/show-image-while-page-is-loading — Anuj, Jun 17 '13 at 10:07
@Anuj Nope, that's not what I want as I mentioned in my question — MaVRoSCy, Jun 17 '13 at 10:11
The initialize with datatables takes place inside success function of ajax request? — Alkis Kalogeris, Jun 17 '13 at 11:51

Alkis Kalogeris · Accepted Answer · 2013-06-17T12:29:11.643

0

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.

edited Jun 17 '13 at 12:29

answered Jun 17 '13 at 12:03

Alkis Kalogeris

17,044
15
59
113

That is what i have wight now!!!! The loader freezes when code goes into datatables init phase!!! – MaVRoSCy Jun 17 '13 at 12:07
Ohh. Ok that wasn't clear on the question, let me update my answer. – Alkis Kalogeris Jun 17 '13 at 12:08
I updated my answer. Only web workers of html5 and I don't think is worth it. Just show a text for now. – Alkis Kalogeris Jun 17 '13 at 12:29
I don't think so. Not yet. But even if it did, it would be an overkill, don't you think? – Alkis Kalogeris Jun 17 '13 at 12:52
What did you do at the end? I'm curious. – Alkis Kalogeris Sep 14 '13 at 11:54

score 0 · Answer 2 · answered Jun 17 '13 at 12:10

0

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

answered Jun 17 '13 at 12:10

greatghoul

1,448
1
17
19

@MaVRoSCy Notice: this plugin will no auto resize the overlay if the container's size changes. – greatghoul Jun 17 '13 at 12:57

show loading image while javascript has heavy load

2 Answers2