Maison >interface Web >tutoriel CSS >Comment éliminer le Flash de contenu non stylé (FOUC) ?
Comment éliminer le Flash de contenu non stylé (FOUC) ?
- Susan Sarandonoriginal
- 2024-12-08 05:31:10554parcourir
Stratégies pour éviter le flash de contenu sans style
La présence de contenu sans style (FOUC) peut perturber l'expérience utilisateur sur les pages Web. Cet article examine les approches permettant d'éliminer le FOUC.
Masquage immédiat des éléments avec JavaScript
Le masquage initial d'éléments avec CSS et leur réaffichage ultérieur avec JavaScript sont problématiques pour les utilisateurs qui désactivent JavaScript. Une approche plus complète consiste à utiliser JavaScript pour masquer et réafficher les éléments après le chargement de la page.
En utilisant jQuery, on pourrait envisager de masquer l'élément body comme ceci :
$(document).ready(function() {
$('body').hide();
$(window).on('load', function() {
$('body').show();
});
});
Cependant, cette méthode peut entraîne toujours FOUC si la page contient de nombreux éléments. Pensez donc à masquer la balise HTML avant que le document ne soit complètement chargé :
<html>
<head>
<!-- Head content -->
<style type="text/css">
.hidden {display:none;}
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$('html').addClass('hidden');
$(window).on('load', function () {
$('html').removeClass('hidden');
});
</script>
</head>
<body>
<!-- Body Content -->
</body>
</html>
Notez que la méthode addClass() est exécutée en dehors de la méthode .ready() pour garantir un masquage immédiat des éléments.
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!