Afficher Ajax Loader pendant le rendu de la page

Question

C'est probablement une question simple, mais comment puis-je utiliser au mieux un chargeur AJAX dans ASP.NET pour fournir une boîte de dialogue de chargement pendant la construction de la page?

J'ai actuellement un UpdatePanel avec un UpdateProgressPanel associé qui contient le message de chargement et gif dans un ProgressTemplate.

Actuellement, j'ai une page sur laquelle onLoad() va et obtient les entités commerciales, puis les affiche. Pendant ce temps, j'aimerais afficher un chargeur AJAX. Serait-il préférable de ne rien charger dans la page et d'avoir un bouton caché qui est déclenché onLoadComplete ou unLoad() qui attendrait alors la fin de la méthode click button affichant le UpdateProgressPanel?

Answer 1

J'ai fait quelque chose de similaire avec un contrôle Timer. Votre OnLoad active simplement le minuteur et la page finit le rendu. Ensuite, la minuterie (avec une valeur d'intervalle minimale) fait le sale travail, montrant le panneau de progression correctement. N'oubliez pas de désactiver la minuterie comme dernière étape du processus.

Answer 2

Vous pouvez le faire en HTML en dehors de .Net. Dans votre page ASPX vous avez un code comme:

 
<div id="loading">
 
<!-- Animated GIF or other indication that stuff is happening -->
 
</div> 

Au bas de la page, juste avant la vous pouvez avoir un extrait de code qui ressemble à ceci:

 
<script language="javascript">
 
    document.getElementById("loading").style.display = "none";
 
</script> 

Le graphique --- aussi longtemps que c'est en haut de la page --- rendra d'abord. Ensuite, tous vos trucs onLoad arriveront, et enfin le JavaScript en ligne arrivera en dernier puisqu'il est en bas de la page.

Beaucoup de fois je vais désactiver les boutons dans leur état déchargé et les activer dans ce JavaScript bas aussi. Cela empêche l'utilisateur d'obtenir un clic heureux et de déclencher des événements avant que la page ne soit prête.

Answer 3

Si vous voulez vraiment un contrôle précis, vous pouvez utiliser un préchargeur AJAX basé sur la barre de progression. Vous pouvez le configurer de manière à terminer chaque fois que l'état a changé. c'est-à-dire de 0 à 4 (5 états prêts) avec chaque état progressant de 20%. La création d'un est extrêmement simple. Avoir un conteneur div qui détient un autre div dont width varie de 0 à 100% par pas de 20% pour chaque état. Ajoutez une couleur de fond à la couleur intérieure div (exemple: bleu) pour lui donner l'apparence de sa progression. GMail je suppose utilise une approche similaire pour son pré-chargeur.

Answer 4

Le poste est vieux mais vous pouvez regarder dehors http://ajax.net-tutorials.com/controls/updateprogress-control/