web-dev-qa-db-fra.com

Comment faire en sorte que le navigateur attende l'affichage de la page jusqu'à ce qu'elle soit complètement chargée?

Je déteste la façon dont vous pouvez réellement voir le chargement des pages Web. Je pense qu'il serait beaucoup plus intéressant d'attendre que la page soit entièrement chargée et prête à être affichée, y compris tous les scripts et les images, puis que le navigateur l'affiche. J'ai donc deux questions ...

  1. Comment puis-je faire ceci?
  2. Je suis totalement novice en développement web, mais est-ce une pratique courante? Sinon pourquoi?

Merci d'avance pour votre sagesse!

javascriptcssweb
74
BeachRunnerFred

C'est une très mauvaise idée pour toutes les raisons données, et plus encore. Cela dit, voici comment vous le faites en utilisant jQuery :

<body>
<div id="msg" style="font-size:largest;">
<!-- you can set whatever style you want on this -->
Loading, please wait...
</div>
<div id="body" style="display:none;">
<!-- everything else -->
</div>
<script type="text/javascript">
$(document).ready(function() {
    $('#body').show();
    $('#msg').hide();
});
</script>
</body>

Si l'utilisateur a désactivé JavaScript, il ne verra jamais la page. Si le chargement de la page ne se termine jamais, ils ne le voient jamais. Si le chargement de la page est trop long, ils peuvent supposer que quelque chose s'est mal passé et aller simplement ailleurs au lieu de * attendez s'il vous plaît ... *.

29
Grant Wagner

Je pense que c'est une très mauvaise idée. Les utilisateurs aiment voir les progrès, clairs et simples. Si vous maintenez la page à un état pendant quelques secondes et que vous affichez ensuite instantanément la page chargée, l'utilisateur aura l'impression que rien ne se passe et que vous risquez de perdre des visites.

Une option consiste à afficher un statut de chargement sur votre page lors du traitement des commandes en arrière-plan, mais cette opération est normalement réservée aux activités en cours de traitement par le site.

http://www.webdeveloper.com/forum/showthread.php?t=180958

En bout de ligne, vous devez au moins montrer une activité visuelle pendant le chargement de la page, et je pense que le chargement de la page par petits morceaux n’est pas si mauvais (à supposer que vous ne fassiez pas quelque chose qui ralentit sérieusement la page temps de chargement).

20
Robert Greiner

Voici une solution utilisant jQuery:

<script type="text/javascript">
$('#container').css('opacity', 0);
$(window).load(function() {
  $('#container').css('opacity', 1);
});
</script>

Je mets ce script juste après ma balise </body>. Il suffit de remplacer "#container" par un sélecteur pour le ou les éléments DOM que vous souhaitez masquer. J'ai essayé plusieurs variantes (notamment .hide()/.show(), et .fadeOut()/.fadeIn()), et le réglage de l'opacité semble avoir le moins d’effets néfastes (scintillement, modification de la hauteur de la page, etc.). Vous pouvez également remplacer css('opacity', 0) par fadeTo(100, 1) pour une transition plus douce. (Non, fadeIn() ne fonctionnera pas, du moins pas sous jQuery 1.3.2.)

Maintenant les mises en garde: j'ai implémenté ce qui précède parce que j'utilise TypeKit et il y a un scintillement gênant lorsque vous actualisez la page et les polices prennent quelques centaines de millisecondes à charger. Donc, je ne veux pas que du texte apparaisse à l'écran tant que TypeKit n'a pas été chargé. Mais évidemment, vous avez de gros problèmes si vous utilisez le code ci-dessus et qu'un élément de votre page ne se charge pas. Il y a deux manières évidentes de l'améliorer:

  1. Un délai maximum (disons, 1 seconde) après lequel tout apparaît, que la page soit chargée ou non
  2. Une sorte d'indicateur de chargement (disons quelque chose de http://www.ajaxload.info/ )

Je ne vais pas m'embêter à mettre en place l'indicateur de chargement ici, mais la limite de temps est facile. Ajoutez simplement ceci au script ci-dessus:

$(document).ready(function() {
  setTimeout('$("#container").css("opacity", 1)', 1000);
});

Alors maintenant, dans le pire des cas, votre page prendra une seconde supplémentaire pour apparaître.

10
Trevor Burnham

Il y a certainement une utilisation valable pour cela. L'une consiste à empêcher les utilisateurs de cliquer sur les liens/provoquant des événements JavaScript jusqu'à ce que tous les éléments de la page et JavaScript soient chargés.

Dans C'EST-À-DIRE , vous pouvez utiliser des transitions de page, ce qui signifie que la page ne s'affiche pas tant qu'elle n'est pas complètement chargée:

<meta http-equiv="Page-Enter" content="blendTrans(Duration=.01)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=.01)" />

Remarquez la courte durée. C’est juste suffisant pour s’assurer que la page ne s’affiche qu’une fois complètement chargée.

Dans FireFox et d'autres navigateurs, la solution que j'ai utilisée est de créer un DIV de la taille de la page et en blanc, puis à la toute fin de la page, placée en JavaScript qui le cache. Une autre solution consiste à utiliser jQuery et à le masquer également. Pas aussi simple que la solution IE mais les deux fonctionnent bien.

10
Keith Adler

Immédiatement après votre balise <body>, ajoutez quelque chose comme ça ...

 <style> body  {opacity:0;}</style>

Et pour la toute première chose dans votre <tête> ajouter quelque chose comme ...

 <script>
  window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};
 </script>

Pour autant que ce soit une bonne ou une mauvaise pratique, cela dépend de vos visiteurs et du temps d'attente.

La question qui reste laissée ouverte et je ne vois pas de réponses ici est de savoir comment être sûr que la page s'est stabilisée. Par exemple, si vous chargez des polices, la page peut refondre un peu jusqu'à ce que toutes les polices soient chargées et affichées. J'aimerais savoir s'il y a un événement qui me dit que la page est terminée.

4
Terry Riegel

Assurez-vous également que le serveur met la page en mémoire tampon et que immédiatement ​​(lors de la construction) ne la diffuse pas dans le navigateur du client.

Puisque vous n'avez pas spécifié votre pile technologique:

  • PHP: regarde dans ob_start
  • ASP.NET: assurez-vous que Response.BufferOutput = True (par défaut)
4
ChristopheD

obligatoire: "use jQuery"

J'ai vu des pages qui mettent un div noir ou blanc qui couvre tout en haut de la page, puis le supprime lors de l'événement document.load. Ou vous pouvez utiliser .ready dans jQuery Cela étant dit, c’était l’une des pages Web les plus ennuyeuses que j’ai jamais vues, je vous le déconseille.

3
Neil N

Vous pouvez tout cacher en utilisant certains css:

#some_div
{
  display: none;
}

puis, en javascript, attribuez une fonction à document.onload pour supprimer cette div.

jQuery rend les choses comme ça très facile.

3
TheOne

Bien que ce ne soit pas toujours une bonne idée, vous êtes libre de décider si vous voulez vraiment le faire. Il y a différentes façons de le faire, et j'ai trouvé un exemple simple ici:

http://www.reconn.us/content/view/37/47/

Probablement pas le meilleur, mais cela devrait vous aider à développer votre propre solution. Bonne chance.

3
Paulo Guedes

En plus de la réponse de Trevor Burnham si vous voulez traiter avec javascript désactivé et différer le chargement du fichier css

HTML5 

<html class="no-js">

    <head>...</head>

    <body>

        <header>...</header>

        <main>...</main>

        <footer>...</footer>

    </body>

</html>

[~ # ~] css [~ # ~] 

//at the beginning of the page

    .js main, .js footer{

        opacity:0;

    }

[~ # ~] javascript [~ # ~] 

//at the beginning of the page before loading jquery

    var h = document.querySelector("html");

    h.className += ' ' + 'js';

    h.className = h.className.replace(
    new RegExp('( |^)' + 'no-js' + '( |$)', 'g'), ' ').trim();

[~ # ~] jQuery [~ # ~] 

//somewhere at the end of the page after loading jquery

        $(window).load(function() {

            $('main').css('opacity',1);
            $('footer').css('opacity',1);

        });

[~ # ~] ressources [~ # ~]

2
RafaSashi

dans le CMS Open Source PHP-Fusion, http://www.php-fusion.co.uk , nous le faisons de cette manière à la base -

    <?php
        ob_start();
        // Your PHP codes here            
        ?>
        YOUR HTML HERE


        <?php 
        $html_output = ob_get_contents();
        ob_end_clean();
        echo $html_output;
    ?>

Vous ne pourrez rien voir charger un à un. Le seul chargeur sera l'onglet spinner de votre navigateur, et il affiche tout simplement en un instant après que tout soit chargé. Essaie.

Cette méthode est totalement conforme aux fichiers HTML.

2
Hien

Bien que je convienne avec les autres que vous ne devriez pas le vouloir, je vais expliquer brièvement ce que vous pouvez faire pour faire une petite différence sans aller jusqu'au bout et en fait bloquer le contenu déjà existant - peut-être cela suffira à vous satisfaire, vous et vos visiteurs.

Le navigateur commence à charger une page et traitera ultérieurement les fichiers css et js situés en externe, en particulier si le fichier auquel le fichier css/js est lié se trouve à l'emplacement "correct". (Je pense que le conseil est de charger js le plus tard possible et d'utiliser des css externes que vous chargez dans l'en-tête). Maintenant, si vous avez une partie de vos css et/ou js que vous voudriez appliquer le plus tôt possible, incluez-la simplement dans la page elle-même. Cela va à l'encontre des conseils d'outils de performance tels que YSlow, mais cela augmentera probablement le changement de votre page, comme vous le souhaitez. Utilisez-le uniquement lorsque vous en avez vraiment besoin!

1
Simon Groenewolt

Je sais que c'est un vieux fil, mais quand même. Une autre option simple est cette bibliothèque: http://gayadesign.com/scripts/queryLoader2/

0
jackcogdill

Vous pouvez commencer par faire en sorte que la page d'index principale de votre site ne contienne qu'un message disant "Chargement en cours". À partir de là, vous pouvez utiliser ajax pour récupérer le contenu de votre page suivante et l'intégrer à la page actuelle, en supprimant le message "Loading".

Vous pourrez peut-être vous contenter d'inclure simplement un conteneur de messages de chargement en haut de votre page (100% largeur/hauteur), puis de supprimer ladite div au chargement terminé.

Ce dernier peut ne pas fonctionner parfaitement dans les deux cas et dépendra de la manière dont le navigateur restitue le contenu.

Je ne suis pas tout à fait sûr que ce soit une bonne idée. Pour les sites statiques simples, je dirais que non. Cependant, j'ai récemment vu beaucoup de sites javascript lourds de sociétés de design qui utilisent une animation complexe et ne font qu'une page. Ces sites utilisent un message de chargement pour attendre que tous les scripts/html/css soient chargés afin que la page fonctionne comme prévu.

0
MiG

J'espère que ce code aidera

 <html>  
    <head>
        <style type="text/css">
          .js #flash {display: none;}
        </style>
        <script type="text/javascript">
          document.documentElement.className = 'js';
        </script>
      </head>
      <body>
        <!-- the rest of your code goes here -->

        <script type="text/javascript" src="/scripts/jquery.js"></script>
        <script type="text/javascript">
          // Stuff to do as soon as the body finishes loading.
          // No need for $(document).ready() here.
        </script>
      </body>
    </html>
0
sir. enock

N'utilisez pas d'affichage: aucun. Si vous le faites, vous verrez les images se redimensionner/se repositionner lors de la présentation (). Utilisez visibilité: masqué à la place et tout sera affiché correctement, mais il ne sera tout simplement pas visible tant que vous ne le lui aurez pas dit.

0
tbott