Intereting Posts

Javascript / jquery ou quelque chose pour changer de texte toutes les secondes CKEditor: Le sous-menu (liste déroulante) n'apparaît pas Exécuter un code PHP dans jQuery PreventDefault () ne fonctionnera pas pour moi Erreur de plugin après la mise à jour WordPress Les propriétés non énumérées apparaissent dans … en boucle en Chrome CSS testant les directives AngularJS avec Karma + Jasmine Comment obtenir une liste de tous les éléments qui résident sur le point cliqué? Hide Bootstrap 3 Redirection Modal & AngularJS ($ location.path) Comment définir des variables javascript à l'aide de MVC4 avec Razor Pour faire bouger les options de sélection en utilisant javascript 'Erreur non détectée: DATA_CLONE_ERR: DOM Exception 25' lancé par un travailleur web Utilisation du trait de soulignement pour trier les objets imbriqués dans un tableau Comment puis-je saisir des événements touchmove sur un élément qui est ajouté au DOM après que mon doigt est déjà sur l'écran? Trouble en majuscule le premier mot en entrée avec javascript / jquery

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

Je déteste comment vous pouvez effectivement voir les pages Web charger. Je pense qu'il serait beaucoup plus séduisant 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 le navigateur l'afficher. J'ai donc deux questions …

Comment puis-je faire ceci?
Je suis un noob total pour le développement web, mais cette pratique est-elle courante? Sinon, pourquoi?

Merci d'avance pour votre sagesse!

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 JavaScript désactivé, ils ne voient jamais la page. Si la page ne finit jamais de charger, elle ne voit jamais la page. Si la page prend trop de temps à charger, ils peuvent supposer que quelque chose a mal tourné et que vous allez ailleurs au lieu de * s'il vous plaît attendez … * ing.

Je pense que c'est une très mauvaise idée. Les utilisateurs aiment voir les progrès, simples et simples. Garder la page à un état pendant quelques secondes, puis afficher instantanément la page chargée fera en sorte que l'utilisateur se sent comme si rien ne se passait et vous risquez de perdre des visites.

Une option est de montrer un état de chargement sur votre page alors que les processus de trucs en arrière-plan, mais cela est normalement réservé lorsque le site effectue réellement un traitement sur l'entrée de l'utilisateur.

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

En bout de ligne, vous devez au moins afficher une activité visuelle pendant la chargement de la page, et je pense que la charge de la page en petits morceaux à la fois n'est pas si grave (en supposant que vous ne faites pas quelque chose qui ralentit sérieusement la page temps de chargement).

Voici une solution utilisant 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 ma marque </body> . Remplacez simplement "#container" par un sélecteur pour les éléments DOM que vous souhaitez cacher. J'ai essayé plusieurs variantes de ceci (y compris .hide() / .show() et .fadeOut() / .fadeIn() ), et le simple fait de définir l'opacité semble avoir le moins d'effets négatifs (scintillement, modification de la hauteur de la page, etc. .). Vous pouvez également remplacer css('opacity', 0) par fadeTo(100, 1) pour une transition plus fluide. (Non, fadeIn() ne fonctionnera pas, au 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 ennuyeux lorsque vous actualisez la page et que les polices prennent quelques centaines de millisecondes à charger. Je ne souhaite donc pas qu'un texte apparaisse sur l'écran jusqu'à ce que TypeKit soit chargé. Mais évidemment, vous avez de gros problèmes si vous utilisez le code ci-dessus et que quelque chose sur votre page ne parvient pas à charger. Il existe deux façons évidentes d'améliorer:

Un délai maximum (par exemple, 1 seconde), après quoi tout apparaît si la page est chargée ou non
Quelque type d'indicateur de chargement (par exemple, de http://www.ajaxload.info/ )

Je ne dérangerai pas la mise en œuvre de l'indicateur de chargement ici, mais le délai est facile. Ajoutez simplement ceci au script ci-dessus:

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

Donc maintenant, le pire scénario, votre page prendra une seconde supplémentaire pour apparaître.

Il existe certainement une utilisation valable pour cela. L'un est d'empêcher les gens de cliquer sur les liens / de provoquer des événements JavaScript jusqu'à ce que tous les éléments de la page et JavaScript aient été chargés.

Dans IE , vous pouvez utiliser les transitions de page qui signifient que la page ne s'affiche qu'après son chargement complet:

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

Notez la courte durée. C'est juste assez pour vous assurer que la page ne s'affiche pas avant qu'elle ne soit complètement chargée.

Dans FireFox et d'autres navigateurs, la solution que j'ai utilisée est de créer un DIV qui est la taille de la page et le blanc, puis à la fin de la page, mettez JavaScript qui le cache. Une autre façon serait d'utiliser jQuery et de le masquer aussi. Pas aussi indolore que la solution IE mais les deux fonctionnent bien.

Veillez également à ce que le serveur sauvegarde la page et ne soit pas immédiatement (en cours de construction) pour le transmettre au navigateur client.

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

PHP: regardez dans ob_start
ASP.NET: assurez-vous que Response.BufferOutput = True (c'est par défaut)

Obligatoire: "utiliser jQuery"

J'ai vu des pages qui mettent un div noir ou blanc qui couvre tout en haut de la page, puis supprimez-le sur l'événement document.load. Ou vous pourriez utiliser .ready in jQuery Cela étant dit, c'était l'une des pages Web les plus angoissantes que j'ai jamais vues, je vous en aviserais .

Bien que ce ne soit pas toujours une bonne idée, vous êtes libre de décider si vous voulez vraiment faire cela. Il existe des façons différentes 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.

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 <head> ajouter quelque chose comme …

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

Dans la mesure où cela est une bonne pratique ou un mauvais dépend de vos visiteurs, et le temps que prend l'attente.

La question qui reste ouverte et je ne vois pas de réponse ici est de savoir si la page s'est stabilisée. Par exemple, si vous chargez des polices, la page peut refondre 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 en cours de rendu.

Vous pouvez cacher tout en utilisant certains css:

 #some_div { display: none; }

Puis javascript attribuez une fonction à document.onload pour supprimer cette div.

JQuery rend ces choses très simples.

En plus de la réponse de Trevor Burnham si vous souhaitez traiter des javascript désactivés et renvoyer CSS en chargement

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

Optimisation de la livraison CSS: Comment différer le chargement de css?
Quel est le but de la classe "no-js" HTML?
Comment obtenir la balise <html> HTML avec JavaScript / jQuery?
Comment ajouter / supprimer une classe en JavaScript?

Alors que je suis d'accord avec les autres que vous ne devriez pas le vouloir, je vais juste expliquer brièvement ce que vous pouvez faire pour faire une petite différence sans aller jusqu'au bout et bloquer le contenu qui existe déjà – peut-être cela suffira pour garder les deux Vous et vos visiteurs heureux.

Le navigateur commence à charger une page et traitera les css et js situés à l'extérieur plus tard, surtout si le lieu où le css / js est lié est sur le point «correct». (Je pense que le conseil est de charger js le plus tard possible, et d'utiliser le css externe que vous chargez dans l'en-tête). Maintenant, si vous avez une partie de votre css et / ou js que vous souhaitez appliquer le plus tôt possible, il suffit d'inclure cela dans la page elle-même. Cela sera contraire aux conseils d'outils de performance tels que YSlow, mais cela augmentera probablement la modification de votre page comme vous voulez qu'elle s'affiche. Utilisez ceci uniquement lorsque vous en avez vraiment besoin!

Dans PHP-Fusion Open Source CMS, http://www.php-fusion.co.uk , nous le faisons de cette façon au cœur –

  <?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 en vous chargeant un par un. Le seul chargeur sera votre onglet de navigation, et il affiche tout en un instant après que tout est chargé. Essaie.

Cette méthode est entièrement compatible avec les fichiers html.

Vous pouvez commencer par avoir la page d'index principale de votre site contenant uniquement un message indiquant "Chargement". À partir de là, vous pouvez utiliser ajax pour récupérer le contenu de votre prochaine page et l'intégrer à l'actuel, à la fin, en supprimant le message "Chargement".

Vous pourriez être en mesure d'en sortir en incluant simplement un conteneur de chargement de messages en haut de votre page, qui est 100% de largeur / hauteur, puis en enlevant le dit div sur la charge complète.

Ce dernier peut ne pas fonctionner parfaitement dans les deux situations et dépendra de la façon dont le navigateur rend le contenu.

Je ne suis pas tout à fait sûr si c'est une bonne idée. Pour les sites statiques simples, je dirais pas. Cependant, j'ai récemment vu beaucoup de sites javascript lourds de sociétés de conception qui utilisent une animation complexe et sont 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.

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

Ne pas utiliser l'affichage: aucun. Si vous le faites, vous verrez les images redimensionner / repositionner lorsque vous faites le show (). Utilisez la visibilité: caché à la place et il décrira tout correctement, mais il ne sera visible que lorsque vous le direz.

J'espère que ce code vous 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>