Home >Web Front-end >CSS Tutorial >How to Eliminate Flash of Unstyled Content (FOUC)?
How to Eliminate Flash of Unstyled Content (FOUC)?
- Susan SarandonOriginal
- 2024-12-08 05:31:10555browse
Strategies to Avoid Flash of Unstyled Content
The presence of unstyled content (FOUC) can disrupt the user experience on web pages. This article delves into approaches to eliminate FOUC.
Immediate Element Hiding with JavaScript
Initially hiding elements with CSS and subsequent redisplaying with JavaScript is problematic for users who disable JavaScript. A more comprehensive approach involves using JavaScript to both hide and redisplay elements after page load.
Using jQuery, one might consider hiding the body element like so:
$(document).ready(function() {
$('body').hide();
$(window).on('load', function() {
$('body').show();
});
});
However, this method may still result in FOUC if the page contains numerous elements. Therefore, consider hiding the HTML tag before the document is fully loaded:
<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>
Note that the addClass() method is executed outside the .ready() method to ensure immediate element hiding.
The above is the detailed content of How to Eliminate Flash of Unstyled Content (FOUC)?. For more information, please follow other related articles on the PHP Chinese website!