Comment ajouter un chargeur Ajax lors du chargement de la page dans asp.net?

Question

Je veux utiliser un chargeur ajax tout en chargeant la page avec un arrière-plan transparent. J'ai essayé le code suivant qui affiche l'image de chargement, mais comment couvrir tout backgroung comme transperent. Mon code est:

<div class="UpdateProgress1"> 
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="true"> 
<ProgressTemplate> 
    <img src="image/ajax-loader.gif" /> Loading ... 
</ProgressTemplate> 
</asp:UpdateProgress> 
</div> 

Et mon css est:

.UpdateProgress1 { 
color:#fff; 
position:fixed; 
filter:alpha(opacity=50); 
-moz-opacity:0.5; 
-khtml-opacity: 0.5; 
opacity: 0.5; 
vertical-align: middle; 
text-align: center; 
background-color: #000; 
float: left; 
top:18%; 
left:13%; 
width:73%; 
} 

Si quelqu'un connaît un lien ou une solution s'il vous plaît me dire. et dans le css ci-dessus si j'ajoute la propriété height, l'image est affichée au moment du chargement de la page sans événement click. merci.

Answer 1

Utilisez un Iframe avec un z supérieur -index pour bloquer la page principale.

<iframe id="blockPage" src="about:blank" style="display: none; position: absolute; 
     z-index: 10; filter: Alpha(Opacity=40) DropShadow(Color=#454545);"></iframe> 

Utilisez les fonctions suivantes pour afficher et masquer le cadre

function BlockPageContent() 
{ 
    var ifrm = document.getElementById("blockPage"); 
    if(null != ifrm) 
    { 
     ifrm.style.display = "block"; 
     ifrm.style.top = 0; 
     ifrm.style.left =0; 
     ifrm.style.width=screen.availWidth; 
     ifrm.style.height = screen.availHeight; 
    } 
} 

function ShowPageContent() 
{ 
    var ifrm = document.getElementById("blockPage"); 
    if(null!= ifrm && ifrm.style.display != "none") 
    { 
     ifrm.style.display = "none"; 
    } 
} 

et appeler la fonction ci-dessus de la façon suivante.

Appelez BlockPageContent dans "InitializeRequest" et ShowPageContent dans "EndRequest". "InitializeRequest" et "EndRequest" sont des gestionnaires d'événement de l'objet PageRequestManager.

Answer 2

Pour clarifier les choses, qui de ce qui suit essayez-vous de faire:

1) Charger une page et, lorsque l'utilisateur appelle un post-retour, afficher un chargeur en attendant le post-retour. 2) Afficher un chargeur au début de la page en cours de chargement. De la description, cela ressemble à ce dernier. Si oui, c'est une approche très rare. Selon le contenu de la page, il peut être difficile de savoir quand le chargement est réellement terminé. Pour un HTML/Javascript configuration, votre meilleur pari serait probablement:

$(document).ready(function() { 
    // code to hide the loader animation 
    }); 

(Notez que vous aurez besoin jQuery pour cela, si vous ne l'avez pas déjà.)

Les choses peuvent obtenir beaucoup plus compliqué si vous avez du contenu qui est retardé pour d'autres raisons, comme attendre qu'un script chargé fasse quelque chose ou attendre un plugin de navigateur (tel que Flash).

Answer 3

Vous semblez avoir une faute de frappe dans votre code HTML:

<div id="wrappe"> 
---- Whole code goes here ---- 
</div> 

Cela devrait être appelé "emballage".

Votre JavaScript génère une erreur car document.getElementById("wrapper") renvoie null, qui n'a pas de style de propriété.

Dans quel navigateur testez-vous ce contenu? Vous devriez voir une petite icône d'avertissement jaune en bas à gauche de la fenêtre d'IE qui vous donnera une idée qu'il y a une erreur de script.

Webpage error details

Message: Object required
Line: 34
Char: 13
Code: 0
URI: http://localhost:64888/ImageTest.aspx

Si vous utilisez Firefox, vous obtenez une copie de la Developer Toolbar qui vous donnera une belle marque d'exclamation rouge et l'erreur exacte de JavaScript:

Error: document.getElementById("wrapper") is null
Source File: http://localhost:64888/ImageTest.aspx
Line: 34