afficher un gif asp.net chargement des pages

s'il vous Plaît voir mon semblable question message"Please Wait" utilisant jQuery ou AJAX?:

pendant que la page ASPX se charge, vous restez sur la page courante du navigateur web. Ainsi, lorsque vous savez que la nouvelle page est en train de se charger (c.-à-d. lorsqu'un bouton ou un lien est pressé), il suffit d'afficher l'image "en train de se charger" et elle disparaîtra automatiquement lorsque le client aura fini de recevoir la "nouvelle" page (qu'il s'agisse d'une nouvelle page réelle ou de la même page postée). arrière.)

exemple de code que vous pouvez utiliser pour afficher automatiquement votre image de chargement (contenue dans un div) lorsqu'un bouton Soumettre est cliqué est le suivant:

$(':submit').click(function() {
    $('#divLoading').show();
});

Alternativement, vous pouvez utiliser le UpdatePanel qui vient dans la boîte à outils Ajax ou dans ASP.NET 4,0. Il a un contrôle appelé UpdateProgress qui affiche une image de chargement automatiquement.

EDIT:

je pense que vous voulez dire que vous voulez montrer une image de" chargement " avant votre premier la page est même chargée, auquel cas vous devriez mettre votre contenu de page principale enroulé autour d'un UpdatePanel, utilisez une commande de chargeur de progression qui affiche automatiquement une image (les deux disponibles dans la boîte à outils Ajax ou ASP.NET 4.0), et chargez le contenu substantiel (Non-master page) de votre page après votre page initiale charge dans le UpdatePanel.

Vous pouvez le faire en mettant le corps de votre page de contenu à l'intérieur d'un Panel, paramétrant la visibilité du panneau à False et puis le paramètre True après le chargement de la page.

Balisage pour un UpdateProgress le contrôle est le suivant. Vous voudriez, bien sûr, le styliser et le positionner dans la bonne zone.

<asp:UpdateProgress ID="upgLoad" DynamicLayout="true" runat="server">
    <ProgressTemplate>
        <div id="theprogress">
            <img src="images/loading.gif" />
            <span>Loading</span>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

EDIT:

Si vous ne souhaitez pas utiliser le UpdatePanel et UpdateProgress contrôles, puis il suffit de faire ce qui suit:

1. mettez votre contenu de page dans un PanelpnlContent et mettre le panneau de la visibilité à False.
2. Créer img et votre chargement de l'image et de la mettre dans un autre PanelpnlLoading avec le visility réglé sur True.

3. mettez un script côté client qui force la page à se recharger dès qu'elle se charge. Mettre ce script dans pnlLoading. mise à Jour: mettez le code #3 ci-dessous dans votre page ASPX pour créer votre panel et il déclenchera un post back immédiatement.

4. ajouter le code #4 suivant à votre Page_Load.

Code:

Pour no 3:

<asp:Panel runat="server" ID="pnlLoading">
    <!-- Replace "form1" with your form's name. -->
    <script type="text/javascript">form1.submit()</script>
    <img src="images/loading.gif" alt="Loading" />
    <span>Loading</span>
</asp:Panel>

Pour le #4:

if (Page.IsPostBack())
{
    pnlLoading.Visible = false;
    pnlContent.Visible = true;
}

cela provoquera l'affichage d'une image de chargement pendant que le contenu de votre page est chargé.

j'ai trouvé que la solution suivante fonctionne bien entre les navigations de page sans affecter L'Ajaxification actuelle ou la structure du site.

il suffit de déposer le script dans le no-mans-land entre les balises head end et body start sur votre page principale.

merci à Subin pour celui-ci.

http://subinsb.com/loading-bar-until-page-loads-completely-using-javascript

<script>
subinsblogla=0;
setInterval(function(){
if(document.readyState!='complete'){
 document.documentElement.style.overflow="hidden";
 var subinsblog=document.createElement("div");
 subinsblog.id="subinsblogldiv";
 var polu=99*99*99999999*999999999;
 subinsblog.style.zIndex=polu;
 subinsblog.style.background="black url(https://lh4.googleusercontent.com/-4WVJgCO93zc/UgpU2Y60CjI/AAAAAAAAC8E/R3XujnTjz3Y/s474/initializing.png) 50% 50% no-repeat";
 subinsblog.style.backgroundPositionX="50%";
 subinsblog.style.backgroundPositionY="50%";
 subinsblog.style.position="absolute";
 subinsblog.style.right="0px";
 subinsblog.style.left="0px";
 subinsblog.style.top="0px";
 subinsblog.style.bottom="0px";
 if(subinsblogla==0){
  document.documentElement.appendChild(subinsblog);
  subinsblogla=1;
 }
}else if(document.getElementById('subinsblogldiv')!=null){
 document.getElementById('subinsblogldiv').style.display="none";
 document.documentElement.style.overflow="auto";
}
},1000);
</script>

il recommande de ne pas remplacer le les noms de variables, parce qu'il pourrait y avoir une autre variable comme ça et le code ne fonctionnera pas. Si vous voulez changer l'Image de chargement il suffit de changer L'URL de fond dans la variable subinsblog.style.fond.