[AJAX] Animation d'attente pendant le chargement de page

Version imprimable

17/05/2013, 12h19
boboss123

1 pièce(s) jointe(s)

[AJAX] Animation d'attente pendant le chargement de page

Bonjour,

J'ai des pages Web avec une navbar : lorsque je click sur un des liens de la navbar , ça me charge une nouvelle page qui au démarrage lance un script qui va récupérer des données dans un fichier .json (jusqu’à là, rien de compliqué :) ).

Le problème est que je voudrais afficher une petite animation au milieu de l'écran le temps que la page soit chargée et que les données du .json soient récupérées.

Voir mon projet de test en pièce jointe pour voir ce que j'arrive à faire
Donc lorsque je click sur un lien, voici les étapes d'affichage :
- page 1 avec données affichées
- page 1 avec données affichées et animation d'attente active (suite au click d'un lien de la navbar)
- page 2 vide avec animation d'attente active
- page 2 avec données affichées

Est-il possible de supprimer l'étape de transition "page 2 vide avec animation d'attente active" car ça ne fait pas très jolie ?
=> si vous n'avez pas compris, n'hésitez pas à me le dire (j'ai un peu du mal à expliquer le problème)

Merci d'avance,
17/05/2013, 16h01
Invité

Bonjour,
J'ais chargé ton ZIP et testé, c'est trés bien fait !
Juste une magnifique démonstration de la différence entre
un faux ajax qui reprend toute la page a zéro ... alors que l'AJAX aurait mis le gif animé d'attente par exemple sous le texte de la premiére page et aurait appelé la seconde page !
A l'arrivée de la seconde page, celle-ci se serait instantanément affichée et le gif aurait été hiden de suite ...
Si tu regarde mon chat tutoriels/ajax/ajax-en-clair/
tu verrais exactement cela a chaque fois que les conversations du chat arrivent !

Merci,

j'arrive bien à récupérer une page html via ajax puis à l'insérer dans la page courante :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<script type="text/javascript">
$(document).ready(function(){
 
    var routes = new Array();
    routes ["#status"] = "status.htm";
 
    function sendRequest(options){
 
        var defauts = {
            "routeList": new Array(),
            "page":""
        }; 
        var myOptions = $.extend(defauts, options);
 
        $.ajax({
            url: myOptions.routeList[myOptions.page],
            type: "GET",
 
            dataType: "html",
            cache: true,
 
            //timeout: myOptions.timeout,
            error: function(jqXHR, textStatus, errorThrown){
                alert("error");
            },
            //data: postStr,
            success: function(data){
                //alert("success");
                $("#containerSection").html($("<div>").append($.parseHTML(data)).find("#containerSection").html());
            }
        });
    }
 
    sendRequest({routeList:routes, page:"#status"});
 
});
</script>

=> mais est-il possible lorsque j'ai récupéré ma page de pouvoir exécuter une fonction Javascript qui est dans ce même fichier ?