ホームページ >ウェブフロントエンド >CSSチュートリアル >より効果的な方法でスタイルのないコンテンツのフラッシュ (FOUC) を排除するにはどうすればよいですか?
より効果的な方法でスタイルのないコンテンツのフラッシュ (FOUC) を排除するにはどうすればよいですか?
- Linda Hamiltonオリジナル
- 2024-11-13 17:33:02265ブラウズ
スタイルのないコンテンツのフラッシュの除去
スタイルのないコンテンツのフラッシュ (FOUC) は、ブラウザが適用される前に Web ページが一時的にスタイルなしで表示されるときに発生します。 CSS スタイルシート。この記事では、JavaScript を使用してページ要素を最初に非表示にしてから再表示する、FOUC を防ぐためのより効果的なアプローチについて説明します。
JavaScript を使用した非表示と再表示
最初にページ要素を非表示にするCSS を使用してから JavaScript で再表示すると、JavaScript が無効になっているユーザーにとってアクセシビリティの問題が発生する可能性があります。より良い解決策は、非表示と再表示の両方に JavaScript を使用することです。
jQuery を使用した例
jQuery を使用した 1 つの可能なアプローチ:
$(document).ready(function() {
$('body').hide();
$(window).on('load', function() {
$('body').show();
});
});
ただし、この方法は、ドキュメント本体を非表示にする前に準備ができていることに依存しており、FOUC が発生する可能性があります。
最適化されたアプローチ: HTML タグを非表示にする
代替戦略これは、JavaScript を使用して、ドキュメントの準備が整う前であっても、ヘッド内でスクリプトが見つかったときにすぐに HTML タグを非表示にすることです。
<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>
この例では、jQuery addClass() メソッドが の外部で呼び出されます。 load() 関数を使用して、HTML タグをすぐに非表示にします。
以上がより効果的な方法でスタイルのないコンテンツのフラッシュ (FOUC) を排除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。