ホームページ >ウェブフロントエンド >CSSチュートリアル >スタイルのないコンテンツのフラッシュ (FOUC) を排除するにはどうすればよいですか?
スタイルのないコンテンツのフラッシュ (FOUC) を排除するにはどうすればよいですか?
- Susan Sarandonオリジナル
- 2024-12-08 05:31:10569ブラウズ
スタイルのないコンテンツのフラッシュを回避する戦略
スタイルのないコンテンツ (FOUC) の存在は、Web ページでのユーザー エクスペリエンスを混乱させる可能性があります。この記事では、FOUC を排除するためのアプローチについて詳しく説明します。
JavaScript を使用した即時要素の非表示
最初に CSS を使用して要素を非表示にし、その後 JavaScript を使用して再表示することは、JavaScript を無効にするユーザーにとって問題となります。より包括的なアプローチには、JavaScript を使用してページの読み込み後に要素を非表示にしたり再表示したりすることが含まれます。
jQuery を使用すると、次のように body 要素を非表示にすることを検討できます。
$(document).ready(function() {
$('body').hide();
$(window).on('load', function() {
$('body').show();
});
});
ただし、この方法では、ページに多数の要素が含まれている場合でも、FOUC が発生します。したがって、ドキュメントが完全にロードされる前に HTML タグを非表示にすることを検討してください。
<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>
要素を即座に非表示にするために、addClass() メソッドは .ready() メソッドの外で実行されることに注意してください。
以上がスタイルのないコンテンツのフラッシュ (FOUC) を排除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。