Miva Merchant, eCommerce, SEO, Wordpress, & general web development and consultation.

Scot's Scripts Blog

Website Tips & Tricks

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

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>

    

    

    

    

~by Scot Ranney, your local web geek jazz piano playing geocaching ski bum.

(2/5, 1 vote) my rating:
overall rating:

0 Comments

Please log in to leave a comment.

The blog posts on Scot's Scripts are served by Scot's Blogger, a Miva Merchant blogging module that makes it easy to create a Wordpress style blog, rich content, and extra pages in your Miva Merchant store.