Preloader e chiamate ajax all'interno della pagina

felino

Preloader e chiamate ajax all'interno della pagina

Salve a tutti,
devo inserire un loader alla mia pagina, vorrei che questo venga visualizzato sempre, in ogni pagina che richiamo fino a quando questa non ha completato il caricamento.

Funziona tutto correttamente, il problema si presente nelle pagine ove al loro interno ho delle chiamate Ajax, usate per prelevare dei dati.
Il loader scompare ma ancora i dati non vengono mostrati.

Così cosa ho fatto:

nella mia index.php, subito dopo l'apertura del body, ho inserito:


    <div id="customLoader-overlay">
        <div id="customLoader">
            <div id="customLoader-image"></div>
        </div>
    </div>

così da visualizzare subito un div di sfondo quasi nero sulla pagina (a tutto schermo) e su di esso la gif con il loader.
2) Alla fine della index.php, subito prima della chiusura del body ho inserito:


$(document).ready(function () {
            $('#customLoader').fadeOut('slow', function () {
                $('#customLoader-overlay').fadeOut("slow");
            });
        });

So che essendo una chiamata asincrona non potrà mai darmi l'effetto desiderato...

Come posso risolvere?

Grazie.

felino

Risolto, chiudendo il CustomLoader quando viene eseguita l'ultima chiamata Ajax dentro la mia pagina.

Grazie.