Maison > Article > interface Web > Comment éliminer le flash du contenu non stylé (FOUC) ?
Comment éliminer le flash du contenu non stylé (FOUC) ?
- original
- 2024-11-22 17:29:14848parcourir
Lutter contre le flash de contenu sans style
L'apparition indésirable de contenu sans style lors du chargement d'une page Web est un problème courant connu sous le nom de Flash de contenu sans style (FOUC ). Ce bref article aborde ce problème et sa solution.
L'approche traditionnelle consistant à masquer les éléments de la page avec CSS et à les révéler ensuite avec JavaScript est problématique. Cela compromet la convivialité du site Web pour les utilisateurs dont JavaScript est désactivé.
Pour surmonter ce problème, il est recommandé d'utiliser JavaScript pour masquer et afficher les éléments après le chargement de la page. Bien que jQuery offre une solution initiale, elle n'est peut-être pas suffisamment rapide pour éviter le FOUC pour les pages plus volumineuses.
Une technique plus efficace consiste à masquer la balise HTML avec JavaScript avant le rendu de la page, ce qui permet une dissimulation rapide lors de l'exécution du script. :
<html>
<head>
...
<style>
.hidden { display: none; }
</style>
...
<script>
$('html').addClass('hidden');
$(window).on('load', function () {
$('html').removeClass('hidden');
});
</script>
</head>
<body>
...
</body>
</html>
Dans cette approche, la fonction addClass() de jQuery est invoquée en dehors de la méthode .on('load'), garantissant que la balise HTML est masquée immédiatement.
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!