How to implement a preloader with jQuery deferred objects

Question

I'm using jQuery deferred objects so I can pull data from multiple sources , however not sure how best to code in a loading message that displays whilst everything is being resolved and then hides when everything is resolved OR rejected

CURRENT CODE:

 jQuery.when(loadData('ws-get-shops.php', {shopId:123}),loadData('ws-get-customers.php')).then(updateResults,showError);


var loadData = function(url, data){

    var jqxhr = jQuery.ajax({
        url:url,
        data:data,
        dataType:'jsonp',
        timeout:60000
    });

    return jqxhr;
}

score 2 · Accepted Answer · answered Jun 21 '12 at 03:30

You can add (or show) the loading message right before you start the ajax calls, like:

$('#loadingMsg').show();
jQuery.when(...).then(updateResults,showError);

and then delete (or hide) it in the updateResults and showError function when they finish, like:

function updateResults(...) {
    $('$#loadingMsg').hide();
    ...
}

function showError(...) {
    $('$#loadingMsg').hide();
    ...
}

You can also add another function as the third parameter to the then function which is called when the when function makes progress and update your loading message to show a percentage or something.

Reference: http://api.jquery.com/deferred.then/

How to implement a preloader with jQuery deferred objects

1 Answers1