Maison > Article > interface Web > Comment forcer le rendu CSS du navigateur avant l’affichage de la page pour un site Web mobile ?

Comment forcer le rendu CSS du navigateur avant l’affichage de la page pour un site Web mobile ?

Barbara Streisandoriginal: 2024-10-26 14:41:30651parcourir

How to Force Browser CSS Rendering Before Page Display for a Mobile Website?

Forcer le rendu CSS du navigateur avant l'affichage de la page

Problème :

Le chargement d'un site Web mobile commence parfois par l'affichage de la page sans CSS, provoquant un retard visuel notable. L’objectif est d’obliger les navigateurs à prioriser le chargement et le rendu CSS avant d’afficher le contenu. Cependant, les méthodes impliquant de placer les fichiers CSS en dehors de la tête ne sont pas recommandées en raison de problèmes de compatibilité potentiels.

Solution :

Une approche plus efficace consiste à introduire un div de superposition temporaire à le début du fichier de sortie :

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

Ensuite, ajoutez le code suivant à la dernière ligne du fichier CSS final :

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

Explication :

Cette méthode exploite le problème d'affichage initial pour masquer le contenu de la page à l'aide d'une superposition div plein écran. Une fois les fichiers CSS nécessaires chargés et traités, le dernier code CSS supprime cette superposition, révélant la page correctement rendue. Cette technique résout le problème sans introduire de hacks pouvant affecter la compatibilité du navigateur.

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!

css for using this display issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Pourquoi « max-width : 100 % » sur une image à l'intérieur d'une cellule de tableau se comporte-t-il différemment dans Firefox et Opera par rapport à Chrome et IE ?Article suivant：Pourquoi « max-width : 100 % » sur une image à l'intérieur d'une cellule de tableau se comporte-t-il différemment dans Firefox et Opera par rapport à Chrome et IE ?

Articles Liés

Voir plus