Élimination du flash de contenu sans style
Le flash de contenu sans style (FOUC) se produit lorsqu'une page Web apparaît brièvement sans style avant que le navigateur puisse l'appliquer la feuille de style CSS. Cet article explore une approche plus efficace pour empêcher FOUC, en utilisant JavaScript pour initialement masquer puis afficher les éléments de la page :
Masquer et afficher avec JavaScript
Masquer initialement les éléments de la page avec CSS, puis les afficher avec JavaScript peut entraîner des problèmes d'accessibilité pour les utilisateurs dont JavaScript est désactivé. Une meilleure solution consiste à utiliser JavaScript pour masquer et afficher.
Exemple avec jQuery
Une approche possible en utilisant jQuery :
$(document).ready(function() { $('body').hide(); $(window).on('load', function() { $('body').show(); }); });
Cependant , cette méthode repose sur le fait que le corps du document soit prêt avant de le masquer, ce qui peut encore entraîner des problèmes. FOUC.
Approche optimisée : masquage de la balise HTML
Une stratégie alternative consiste à utiliser JavaScript pour masquer la balise HTML immédiatement lorsque le script est rencontré dans l'en-tête, avant même le document est prêt :
<html> <head> <!-- Other stuff like title and meta tags go here --> <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').show(); }); </script> </head> <body> <!-- Body Content --> </body> </html>
Dans cet exemple, la méthode jQuery addClass() est appelée en dehors de la fonction .load() pour masquer la balise HTML 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!