Easy Way to Stop Flash of Unstyled Web Page Content

Miva Merchant Modules and Development
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.

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 • February 13, 2016

Computer Stuff, Website Tips & Tricks

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.

  1. .left-menu {
  2. display: none;
  3. }

After the javascript has executed, the left menu is "turned on" using the jQuery show() function.

  1. $('.left-menu').delay(2000).show(0);
  2. // 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:

  1. $('.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:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .left-column {
  6. float: left;
  7. padding: 0 10px 0 10px;
  8. }
  9. .left-menu {
  10. display: none;
  11. }
  12. .menu-content {
  13. float: left;
  14. border-left: 1px solid orange;
  15. padding-left: 10px;
  16. width: 70%;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div class="container">
  22. <div class="left-column">
  23. <;h3>Menu: 2 second delay</h3>
  24. <ul class="left-menu">
  25. <li>Choice A</li>
  26. <li>Choice B</li>
  27. <li>Choice C</li>
  28. </ul>
  29. </div>
  30. <div class="menu-content">
  31. <h3>Menu Displays When Ready</h3>
  32. <p>
  33. The script below pauses for two seconds before the menu will be shown.
  34. </p>
  35. <p>
  36. 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.
  37. </p>
  38. <p>
  39. 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:
  40. </p>
  41. <p>
  42. $('.left-menu').show(0).easytree();
  43. </p>
  44. </div>
  45. </div>
  46. <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  47. <script>
  48. $('.left-menu').delay(2000).show(0);
  49. </script>
  50. </body>
  51. </html>
overall rating:
★★★★★
★★★★★
★★★★★
my rating: log in to rate

css flash html javascript jquery

The blog posts on Scot's Scripts are made using by Scot's Blogger, a full featured Wordpress replacement Miva Merchant blogging module.