Maison >interface Web >tutoriel CSS >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:30745parcourir
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!