web-dev-qa-db-fra.com

afficher la page HTML une fois le chargement terminé

Existe-t-il un moyen de forcer le navigateur à afficher une page uniquement après que tout le contenu de la page est complètement chargé (comme les images, les scripts, les CSS, etc.)?

javascripthtmlbrowser
31
Rana

La chose la plus simple à faire est de mettre un div avec le CSS suivant dans le corps:

#hideAll
 {
   position: fixed;
   left: 0px; 
   right: 0px; 
   top: 0px; 
   bottom: 0px; 
   background-color: white;
   z-index: 99; /* Higher than anything else in the document */

 }

(Notez que position: fixed ne fonctionnera pas dans IE6 - je ne connais aucun moyen sûr de le faire dans ce navigateur)

Ajoutez le DIV comme ça (directement après la balise body d'ouverture):

<div style="display: none" id="hideAll">&nbsp;</div>

montrer le DIV directement après:

 <script type="text/javascript">
   document.getElementById("hideAll").style.display = "block";
 </script>

et cachez-le onload:

 window.onload = function() 
  { document.getElementById("hideAll").style.display = "none"; }

ou en utilisant jQuery

 $(window).load(function() {  document.getElementById("hideAll").style.display = "none"; });

cette approche a l'avantage de fonctionner également pour les clients qui ont désactivé JavaScript. Il ne devrait pas provoquer des scintillements ou d'autres effets secondaires, mais ne l'ayant pas testé, je ne peux pas le garantir entièrement pour tous les navigateurs.

47
Pekka 웃

mettre une superposition sur la page

#loading-mask {
    background-color: white;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

puis supprimez cet élément dans un window.onload gestionnaire ou, cachez-le

window.onload=function() {
    document.getElementById('loading-mask').style.display='none';
}

Bien sûr, vous devez utiliser votre bibliothèque javascript (jquery, prototype ..) gestionnaire onload spécifique si vous utilisez une bibliothèque.

7
aularon

Masquez d'abord le corps, puis affichez-le avec jQuery après son chargement.

body {
    display: none;
}

$(function () {
    $('body').show();
}); // end ready

En outre, il serait préférable d'avoir $('body').show(); comme dernière ligne dans votre dernier fichier principal .js.

5
BlekStena

vous pouvez également opter pour cela .... cela n'affichera la section HTML qu'une fois le javascript chargé.

<!-- Adds the hidden style and removes it when javascript has loaded -->
<style type="text/css">
    .hideAll  {
        visibility:hidden;
     }
</style>

<script type="text/javascript">
    $(window).load(function () {
        $("#tabs").removeClass("hideAll");
    });
</script>

<div id="tabs" class="hideAll">
   ##Content##
</div>
3
JGilmartin

essayez d'utiliser javascript pour cela! On dirait que c'est la meilleure et la plus simple façon de le faire. Vous obtiendrez une fonction intégrée pour exécuter un code html uniquement après le chargement complet de la page HTML.

ou bien vous pouvez utiliser une programmation basée sur l'état lorsqu'un événement se produit à un état particulier du navigateur.

0
Noddy Cha