changement de page en java

bonjour à tous,

voici quelque jour que j'essaie d'adapter un site qui lorsque l'on clique sur le moindre lien il se passe les choses suivante:
1-un fade out d'une div conteneur
2-un fade in d'une div loading
3-lance le chargement de la page appellé par le lien cliqué
4-un fade out de la div loading
5-un fade in de la div conteneur

il y a de l'idée, mais j'ai des comportement érratique par moment.

par moment les étape ne se font pas dans le bonne ordres, ou même la nouvelle page se charge puis de décharge immédiatement et l'ancienne réaparré.

vue que je n'ai aucun message dans la console, c'est certainement un mauvaise approche de ma part, et j'ai toujours du mal à appréhender la notion synchrone et asynchrone

Pourriez vous me guider.

merci d'avance

Flo

PS: j'utilise tweenmax et lite juste pour les fadein et fadeout, donc s'il y a plus simple à faire je suis ouvert à toute proposition

var getHttpRequest = function () {
    var httpRequest = false;

    if (window.XMLHttpRequest) { // Mozilla, Safari,...
        httpRequest = new XMLHttpRequest();
        if (httpRequest.overrideMimeType) {
            httpRequest.overrideMimeType('text/xml');
        }
    }
    else if (window.ActiveXObject) { // IE
        try {
            httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            try {
                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
            }
        }
    }

    if (!httpRequest) {
        alert('Abandon :( Impossible de créer une instance XMLHTTP');
        return false;
    }

    return httpRequest
}
function start_effect_load() {
    var tl = new TimelineLite();
   (function ($) {
    tl.to ("#loading", 0.5, {autoAlpha: "0"});
    tl.to ("#loading", .25, {display: "none"});
    tl.to ("#main_content_ps", .25, {display: "block"});
    tl.to ("#main_content_ps", 1, {autoAlpha: "1"});
    tl.play();
    scan();
    })(jQuery);
    return true;
}

function start_effect_unload() {
    var tl = new TimelineLite();
    (function ($) {
    tl.to ("#main_content_ps", 0.25, {autoAlpha: "0"});
    tl.to ("#main_content_ps", .25, {display: "none"});
    tl.to ("#loading", .25, {display: "block"});
    tl.to ("#loading", 1, {autoAlpha: "1"});
    tl.play();
    scan();
    })(jQuery);
    return true;
}

function scan() {
    var links = document.querySelectorAll('.link_pl');
    for (var i = 0; i < links.length; i++) {
        var link = links[i];
        link.addEventListener('click', function (e) {
            e.preventDefault();
            while (start_effect_unload() != true) {
                console.log("pas fini");
            }
            $('.off-canvas').foundation('close');

            var xhr = getHttpRequest();

            xhr.onreadystatechange = function () {

                if (xhr.readyState === 4) {
                    document.getElementById('main_content_ps').innerHTML = xhr.responseText;
                    start_effect_load()
                    while (start_effect_load() != true) {
                        console.log("pas fini");
                    }
                    //restart();
                }

            }
            xhr.open('GET', this.getAttribute('href'), true);
            xhr.send();
        })
    }
    ;
}

'''