Comment forcer le rendu CSS du navigateur avant l'affichage de la page pour un site Web mobile ?-tutoriel CSS-php.cn

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

Barbara Streisand

Libérer： 2024-10-26 14:41:30

original

784 Les gens l'ont consulté

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>

Copier après la connexion

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

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

Copier après la connexion

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!