web-dev-qa-db-fra.com

afficher un gif pendant le chargement de la page asp.net

J'ai un processus de chargement de page ASP.NET long.

Existe-t-il un moyen d'afficher un gif de chargement pendant le chargement de la page ASP.NET?

Évidemment, je ne peux pas utiliser une image sur la page elle-même, et lorsque je charge d'abord une "page factice" avec l'image "Loading ...", cette page est supprimée dès que je redirige l'utilisateur vers la vraie page .. .

Un indice? Merci

asp.netimagepreload
13
Didier Levy

Vous pouvez utiliser un contrôle UpdateProgress pour cela, comme ceci:

<asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true">
    <ProgressTemplate>
        <div id="overlay">
            <div id="modalprogress">
                <div id="theprogress">
                    <asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="/images/wait.gif" />
                    Please wait...
                </div>
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

Voici quelques styles que vous pouvez utiliser si vous souhaitez qu'il soit semi-transparent:

#overlay {
    position: fixed;
    z-index: 99;
    top: 0px;
    left: 0px;
    background-color: #f8f8f8;
    width: 100%;
    height: 100%;
    filter: Alpha(Opacity=90);
    opacity: 0.9;
    -moz-opacity: 0.9;
}            
#theprogress {
    background-color: #fff;
    border:1px solid #ccc;
    padding:10px;
    width: 300px;
    height: 30px;
    line-height:30px;
    text-align: center;
    filter: Alpha(Opacity=100);
    opacity: 1;
    -moz-opacity: 1;
}
#modalprogress {
    position: absolute;
    top: 40%;
    left: 50%;
    margin: -11px 0 0 -150px;
    color: #990000;
    font-weight:bold;
    font-size:14px;
}
13
James Johnson

Veuillez voir ma question similaire "Veuillez patienter" en utilisant jQuery ou AJAX? :

Pendant le chargement de la page ASPX, vous resterez sur la page actuelle dans le navigateur Web. Ainsi, lorsque vous savez que la nouvelle page est en cours de chargement (c'est-à-dire lorsqu'un bouton ou un lien est enfoncé), affichez simplement l'image "Loading" et elle disparaîtra automatiquement lorsque le client aura fini de recevoir la "nouvelle" page (que ce soit une page réelle nouvelle page ou la même page publiée).

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

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

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

MODIFIER:

Je pense que vous voulez dire que vous voulez afficher une image de "chargement" avant même que votre première page ne soit même chargée, auquel cas vous devez mettre votre contenu de page maître enroulé autour d'un UpdatePanel, utilisez un contrôle de chargeur de progression qui affiche automatiquement un image (tous deux disponibles dans Ajax Toolkit ou ASP.NET 4.0), et chargez le contenu substantiel (page non maître) de votre page - après votre chargement initial de page dans le UpdatePanel.

Pour ce faire, placez le corps de votre page de contenu dans un Panel, définissez la visibilité du panneau sur False, puis définissez-le sur True après le chargement de la page.

Le balisage d'un contrôle UpdateProgress est le suivant. Vous voudrez 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>

MODIFIER:

Si vous ne souhaitez pas utiliser les contrôles UpdatePanel et UpdateProgress, procédez simplement comme suit:

  1. Placez le contenu de votre page dans un Panel appelé pnlContent et définissez la visibilité du panneau sur False.
  2. Créez un img et votre image de chargement et placez-le dans un Panel distinct appelé pnlLoading avec la visibilité définie sur True.

  3. Mettez un script côté client qui force la page à se recharger dès qu'elle se charge. Mettez ce script dans pnlLoading. Mise à jour : Mettez le code # 3 ci-dessous dans votre page ASPX pour créer votre panneau et cela déclenchera immédiatement une publication.

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

Code:

Pour # 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 # 4:

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

Cela provoquera l'affichage d'une image de chargement pendant le chargement du contenu de votre page réelle.

5
Devin Burke

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

Déposez simplement le script dans no-mans-land entre les balises head head et body start sur votre page maître.

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 vous recommande de ne pas remplacer les noms de variables, car il pourrait y avoir une autre variable comme ça et le code ne fonctionnera pas. Si vous souhaitez modifier l'image de chargement, modifiez simplement l'URL d'arrière-plan dans la variable subinsblog.style.background.

1
user3300006