BlockUI Ajax loading wrong moment

Question

I know there's other post about this. but there's no answer.

Situation, I have an ajax command. It take time because I have somes things to get.

I want to include a loading between the execution of the ajax.

I want to use jquery BlockUI because its simple and good looking.

But I dont know why the visual effect not working until ajax load the entire data(like when "success" begin).

I try multiple way but not working.

here's my last code :

function from http://www.codeproject.com/Articles/382390/An-Example-to-Use-jQuery-Global-AJAX-Event-Handler

var AjaxGlobalHandler = {
Initiate: function(options) {
    $.ajaxSetup({ cache: false });

    // Ajax events fire in following order
    $(document).ajaxStart(function() {
        $.blockUI({
            message: options.AjaxWait.AjaxWaitMessage,
            css: options.AjaxWait.AjaxWaitMessageCss
        });
    }).ajaxSend(function(e, xhr, opts) {
    }).ajaxError(function(e, xhr, opts) {
        if (options.SessionOut.StatusCode == xhr.status) {
            document.location.replace(options.SessionOut.RedirectUrl);
            return;
        }

        $.colorbox({ html: options.AjaxErrorMessage });
    }).ajaxSuccess(function(e, xhr, opts) {
    }).ajaxComplete(function(e, xhr, opts) {
    }).ajaxStop(function() {
        $.unblockUI();
    });
}
}; 

call ready

        var options = {
            AjaxWait: {
                AjaxWaitMessage: '<h1 class="ui-overlay-loading-content"><img class="ui-overlay-loading-image" src="_inc/img/loading3circle1.gif" />Chargement des données ...</h1>',

                AjaxWaitMessageCss: { backgroundColor: '#ffffff' }
            },
            AjaxErrorMessage: "<h6>Erreur!/h6>"         
        };

        AjaxGlobalHandler.Initiate(options);

call execution

$.ajax({
                type: "POST",
                url: location.href.split('/').pop() + "?action=" + actionName + "&recherche=" + recherche,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response) {
                    FillDataGridOnSuccess(response, gridId, dataTypeName);
                },
                error: function(xhr, ajaxOptions, thrownError) {
                    alert("xhr.status : " + xhr.status);
                    alert("thrownError : " + thrownError);
                }
            });    

I try also

var ajaxSettings = function(options) {
    return $.extend(
        {
            beforeSubmit: function() {
            //beforeSend: function() {                
                $.blockUI({ overlayCSS: { backgroundColor: '#ffffff' },
                    message: '<h1 class="ui-overlay-loading-content"><img class="ui-overlay-loading-image" src="_inc/img/loading3circle1.gif" />Chargement des données ...</h1>'
                });
            },
            complete: function() {
                $.unblockUI();
            }
        },
        options
    );
};

Every test that I did end with a loading who seems to only appear on ajaxSuccess.

I know there's sample on official blockUI site http://jquery.malsup.com/block/#demos and they working there, but I cant on my own. did anybody see why?

tank you