ホームページ > 記事 > ウェブフロントエンド > スタイルの設定されていないコンテンツのフラッシュをグレースフル デグラデーションで削除する方法
スタイルの設定されていないコンテンツのフラッシュをグレースフル デグラデーションで削除する方法
- Susan Sarandonオリジナル
- 2024-11-13 05:06:02474ブラウズ
スタイルのないコンテンツのフラッシュの除去: グレースフルな劣化アプローチ
スタイルのないコンテンツのフラッシュ (FOUC) は、Web ページ要素が一時的に表示されるときに発生します。 JavaScript が開始されてそれらのスタイルが適用される前に、意図したスタイルが適用されません。この見苦しい影響を防ぐために、JavaScript が無効になっているユーザーの機能を損なうことなく正常に機能を低下させるソリューションを検討します。
CSS ではなく JavaScript で要素を隠す
最初はCSS で要素を非表示にし、JavaScript で表示することには問題があります。JavaScript が有効になっていないユーザーにはそれらの要素が表示されないからです。より良いアプローチは、要素の非表示と表示の両方に JavaScript を使用することです。
ページ コンテンツの非表示と表示のための jQuery
jQuery を使用すると、ページ コンテンツを効果的に非表示にできます。
$(document).ready(function() {
$('body').hide();
$(window).on('load', function() {
$('body').show();
});
});
HTML による表示の最適化Hiding
ただし、大きなページの場合、上記のコードは FOUC を防止できない可能性があります。したがって、ヘッド内で JavaScript が検出されるとすぐに HTML 要素を非表示にすることができます。
<html>
<head>
<style type="text/css">
.hidden {display:none;}
</style>
<script type="text/javascript">
$('html').addClass('hidden');
$(window).on('load', function() {
$('html').removeClass('hidden');
});
</script>
</head>
<body>
<!-- Body Content -->
</body>
</html>
jQuery addClass() メソッドが $(window).on('load') の外側で呼び出されることに注意してください。
このアプローチでは、ページ コンテンツが最初は非表示になり、ページが完全に読み込まれるとユーザーに対しても表示されるようにすることで、適切な機能低下が保証されます。 JavaScript が有効になっていない状態で。
以上がスタイルの設定されていないコンテンツのフラッシュをグレースフル デグラデーションで削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。