Comment forcer les navigateurs à charger les CSS avant le contenu des sites Web mobiles ?

Modification du comportement de rendu du navigateur pour prioriser le chargement CSS

Question :

Lors du chargement d'une version mobile d'un site Web, le l'utilisateur voit initialement la page sans CSS appliqué, ce qui prend quelques secondes pour s'afficher. Comment forcer les navigateurs à charger d'abord le CSS, avant d'afficher le contenu ?

Réponse :

Une solution créative a émergé qui utilise le délai de rendu pour masquer le contenu jusqu'à ce que CSS se charge.

1. Créez une superposition de chargement :

   • Ajoutez un
     élément avec un fond opaque et un positionnement absolu pour couvrir la page entière.

2. Masquer la superposition lors du chargement CSS :

   • Dans le fichier CSS final, incluez une règle pour rendre le div de superposition invisible (#loadOverlay {display: none;}).

Implémentation :

Dans l'en-tête HTML, juste avant de fermer le champ tag :

<code class="html"><div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div></code>

Dans le fichier CSS final chargé :

<code class="css">#loadOverlay{display: none;}</code>

Cette approche profite du rendu HTML retardé pour créer une illusion visuelle de chargement CSS avant le contenu réel. Une fois le CSS terminé, la superposition est supprimée, révélant la page correctement stylée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!