81 votes

Comment puis-je faire le navigateur attendre pour afficher la page, jusqu'à ce qu'elle soit complètement chargé?

Je déteste la façon dont vous pouvez réellement voir les pages de charge. Je pense qu'il pourrait être beaucoup plus attrayant pour attendre jusqu'à ce que la page est complètement chargée et prête à être affichée, y compris les textes et les images, et ensuite à l'affichage de navigateur. J'ai donc deux questions...

  1. Comment puis-je faire cela?
  2. Je suis un total noob de développement web, mais est-ce pratique courante? Si non, pourquoi?

Merci d'avance pour votre sagesse!

35voto

Grant Wagner Points 14085

C'est une très mauvaise idée pour toutes les raisons données, et plus encore. Cela dit, voici comment vous le faites à l'aide de 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, ils ne voient jamais la page. Si la page ne se termine jamais de chargement, ils ne voient jamais la page. Si la page met trop de temps à charger, ils peuvent supposer quelque chose s'est mal passé et juste aller voir ailleurs au lieu de s'il vous plaît attendre...ing.

22voto

Robert Greiner Points 16237

Je pense que c'est une très mauvaise idée. Les utilisateurs aiment voir des progrès, clair et simple. En gardant la page à un état pendant quelques secondes et ensuite instantanément l'affichage de la page chargée fera de l'utilisateur l'impression que rien ne se passe et vous êtes susceptible de perdre des visites.

Une option est de montrer un état de chargement de votre page, tandis que les trucs les processus en arrière-plan, mais ce qui est normalement réservé pour quand le site est en train de faire le traitement sur la saisie de l'utilisateur.

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

La ligne du bas, vous avez au moins besoin de montrer une activité visuelle, tandis que le chargement de la page, et je pense qu'au chargement de la page en petits morceaux, à une époque n'est pas si mauvais que ça (en supposant que vous ne faites pas quelque chose de sérieux qui ralentit le temps de chargement de page).

13voto

Trevor Burnham Points 43199

Voici une solution à l'aide de jQuery:

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

J'ai mis ce script juste après mon </body> balise. Il suffit de remplacer "#container" avec un sélecteur pour les DOM ou les élément(s) que vous souhaitez masquer. J'ai essayé plusieurs variantes de ce (y compris .hide()/.show(), et .fadeOut()/.fadeIn()), et la seule définition de l'opacité semble avoir le moins d'effets néfastes (scintillement, la modification de la hauteur de la page, etc.). Vous pouvez également remplacer css('opacity', 0) avec fadeTo(100, 1) pour une transition plus en douceur. (Non, fadeIn() ne fonctionne pas, du moins pas sous jQuery 1.3.2.)

Maintenant, les mises en garde: j'ai mis en œuvre la-dessus car je suis en utilisant TypeKit et il est gênant de scintillement lorsque vous actualisez la page et les polices de prendre quelques centaines de millisecondes à charger. Donc je ne veux pas n'importe quel texte à afficher à l'écran jusqu'à ce que TypeKit a chargé. Mais de toute évidence, vous êtes en grande difficulté si vous utilisez le code ci-dessus et quelque chose sur votre page ne se charge pas. Il y a deux façons évidentes qu'il pourrait être amélioré:

  1. Un maximum de limite de temps (disons 1 seconde) après lequel tout semble si la page est chargée ou pas
  2. Une sorte d'indicateur de chargement (dire, quelque chose de http://www.ajaxload.info/)

Je ne vais pas la peine de la mise en œuvre de l'indicateur de chargement ici, mais le délai est facile. Il suffit d'ajouter ce pour le script ci-dessus:

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

Alors maintenant, le scénario du pire, votre page sera de prendre un supplément de seconde à apparaître.

11voto

Cat Man Do Points 11771

Il y a certainement une utilisation valide pour cette. On est d'empêcher les gens de cliquer sur des liens/JavaScript provoquant des événements à se produire jusqu'à ce que tous les éléments de la page et JavaScript ont chargé.

Dans IE, vous pouvez utiliser les transitions de page, ce qui signifie que la page ne s'affiche pas jusqu'à ce qu'il soit complètement chargé:

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

Avis de la courte durée. C'est juste assez pour s'assurer que la page ne s'affiche pas jusqu'à ce qu'il soit complètement chargé.

Dans FireFox et les autres navigateurs, la solution que j'ai utilisé est de créer un DIV qui est de la taille de la page et blanc, puis à la fin de la page, mettre en JavaScript qui la cache. Un autre moyen serait d'utiliser jQuery et de le cacher ainsi. Pas aussi facile que l'IE solution, mais les deux fonctionnent très bien.

3voto

Neil N Points 14566

obligatoire: "utiliser jQuery"

J'ai vu des pages qui mettent en noir ou en blanc div qui couvre tout ce qui est en haut de la page, puis le retirer sur le document.la charge de l'événement. Ou vous pourriez utiliser .prêt en jQuery cela étant dit, il a été l'un des plus souvent embêtant pages web que j'ai jamais vu, je ne vous le conseille.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X