ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用せずにスタイルのないコンテンツのフラッシュ (FOUC) を防ぐ方法
JavaScript を使用せずにスタイルのないコンテンツのフラッシュ (FOUC) を防ぐ方法
- DDDオリジナル
- 2024-11-14 11:51:02124ブラウズ
Eliminating the Flash of Unstyled Content
The flash of unstyled content (FOUC) refers to the brief moment when a web page appears with its raw HTML elements before the CSS styles are applied. This jarring effect can negatively impact the user experience.
Solution: Using JavaScript
A common solution involves initially hiding elements using CSS and then using JavaScript to unhide them once the page loads. However, this approach can be problematic for users who have JavaScript disabled.
A Better Approach: Hiding the HTML Element
Instead of hiding individual elements, a more effective approach is to hide the entire HTML element using JavaScript. This can be achieved by adding a hidden class to the HTML tag in the
section:<html>
<head>
<style type="text/css">
.hidden { display: none; }
</style>
<!-- ... -->
</head>
<body>
<!-- Body Content -->
</body>
</html>
In the JavaScript code, the addClass() method is used to hide the HTML element before the document is ready:
$('html').addClass('hidden');
Once the page is loaded (or the document is ready), the HTML element is made visible:
$(document).ready(function() {
$('html').removeClass('hidden');
});
By hiding the HTML element, all its child elements are hidden as well, preventing any FOUC. Note that the addClass() method should be called outside of the .ready() function for this approach to work effectively.
以上がJavaScript を使用せずにスタイルのないコンテンツのフラッシュ (FOUC) を防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。