Il y a plusieurs façons de le faire. Je profite du fait que l'événement onload n'est pas déclenché tant que tout le contenu de la page n'est pas complètement chargé. Comme il semble que votre site utilise déjà jQuery, tous les exemples ci-dessous l'utiliseront.
Dans vos contrôles utilisateur, vous pouvez les masquer par défaut. Pour ce faire, placez un attribut style dans une balise wrapper pour votre contrôle:
<div style="display: none">
<!-- Optionally you could use "visibility: hidden"
instead of "display: none". This will keep the
control's placeholder, but not physically show it to the user.
-->
<!-- Your control content here -->
</div>
A l'intérieur de votre commande, vous pouvez avoir le code JavaScript comme celui-ci (à supposer que jQuery sera inclus en haut de la page, qui est la façon dont votre site est maintenant). Ce serait placé directement sous votre contrôle.
<script type="text/javascript">
$(window).load(function() {
$("#" + <%= this.ClientID %>).css("display", "block");
// If you chose to use visibility, try the following line instead
//$("#" + <%= this.ClientID %>).css("visibility", "visible");
});
</script>
Pour expliquer comment cela fonctionne ...
Lorsque le navigateur charge d'abord la page, les paramètres par défaut de contrôle d'être caché. Ce ne sera pas rendu du tout. jQuery s'abonne à l'événement load() de votre page. Lorsque l'événement de chargement se déclenche, il affiche le contrôle. Cela arrive seulement une fois que tout est fini de charger.
Vous pouvez également masquer tout "chargement ..." <div /> dans cet événement de chargement également.
Une autre option, qui peut être mieux en fonction de ce que vous faites, est de structurer votre page afin que vous avez 2 divs principaux. Un div "loading" et un div "content" La div de chargement serait affichée par défaut avec un message de chargement générique. Le contenu div serait caché par défaut (ou simplement caché derrière un exemple comme ci-dessous). L'événement onload supprime les objets de chargement de la page et permet aux images d'être affichées.
Cet exemple ci-dessous affiche un message de chargement au-dessus de la page entière jusqu'à ce que le chargement soit terminé.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic Loading Test</title>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
overflow: hidden/* Prevent user from scrolling. */
} /* Scrolling is re-enabled on load by JavaScript */
.loadingBackground {
background: #000;
filter: alpha(opacity=70); /* internet explorer */
-khtml-opacity: 0.7; /* khtml, old safari */
-moz-opacity: 0.7; /* mozilla, netscape */
opacity: 0.7; /* fx, safari, opera */
height: 100%;
width: 100%;
position: absolute;
}
.loadingWrapper {
position: absolute;
top: 15%;
width: 100%;
}
.loading {
margin: 0 auto;
width: 300px;
text-align: center;
background: #ffffff;
border: 3px solid #000;
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('.loadingBackground, loadingWrapper, .loading').fadeOut('normal');
$('body').css('overflow', 'auto');
});
</script>
</head>
<body>
<div class="loadingBackground"></div>
<div class="loadingWrapper">
<div class="loading">
Please Wait...<br />
<img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/30-1.gif" />
</div>
</div>
<!-- Large Images included to increase load time to show the loading effect -->
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3c/KillaryHarbour.jpg"
style="height: 100%; width: 100%" />
<img src="http://upload.wikimedia.org/wikipedia/commons/6/6c/Ireland_-_Plains_of_South_Kildare.jpg"
style="height: 100%; width: 100%" />
</body>
</html>