Easy Way to Stop Flash of Unstyled Web Page Content
A flash of unstyled content when a webpage loads is ugly and annoying, and easily fixed.
As helpful as jQuery and other website plugins can be, a common issue is unstyled web page content coming up a moment before everything looks good. Luckily there's an easy five minute fix to keep unstyled content hidden until it's ready.
by Scot Ranney
This addresses the unstyled content flash issue where javascript functions are applying CSS to content that has already loaded. You see a flash of unstyled primordial web sludge content before the javascript (in my case a jQuery plugin) can style everything.
This solution uses jQuery and will not work on sites that don't already have jQuery loaded. If your site is run by a CMS such as Wordpress or eCommerce solution like Miva Merchant, chances are jQuery is already being used.
The solution: hide the unstyled content until it's ready to be displayed.
Example - see a demo
The example below uses CSS to force the left menu display to none when the page loads based on the .left-menu class.
.left-menu {
display: none;
}
After the javascript has executed, the left menu is "turned on" using the jQuery show() function.
$('.left-menu').delay(2000).show(0);
// this one has a delay built in, just for example
In my case, I had to hide left menu content until the styles were applied by a jQuery plugin called Easytree.js. My javascript call is like this:
$('.left-menu').show(0).easytree();
Here's the full demo page with the same code that you'll see by clicking on the demo link above:
<!DOCTYPE html>
<html>
<head>
<style>
.left-column {
float: left;
padding: 0 10px 0 10px;
}
.left-menu {
display: none;
}
.menu-content {
float: left;
border-left: 1px solid orange;
padding-left: 10px;
width: 70%;
}
</style>
</head>
<body>
<div class="container">
<div class="left-column">
<;h3>Menu: 2 second delay</h3>
<ul class="left-menu">
<li>Choice A</li>
<li>Choice B</li>
<li>Choice C</li>
</ul>
</div>
<div class="menu-content">
<h3>Menu Displays When Ready</h3>
<p>
The script below pauses for two seconds before the menu will be shown.
</p>
<p>
The .delay(2000) in the javascript forces a 2 second delay just for the example. If you were using this for real, you would change the javascript by removing .delay(2000) and adding the function you are waiting for.
</p>
<p>
In my case, it was a jQuery tree plugin (easytree.js) that was flashing content. The initializing function call is easytree() and the content flash was solved like this:
</p>
<p>
$('.left-menu').show(0).easytree();
</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$('.left-menu').delay(2000).show(0);
</script>
</body>
</html>
Related Articles
These articles might be interesting for you as well: