A Quick Way to Avoid the blink of Unstyled Content on Page Load

This is a method I’ve been using for a while and wanted to document it for anyone else who may want to use it or improve it.

When you have a constructed page that uses JavaScript to render content you will sometimes encounter a blink unstyled content that sometimes occurs when applying styles with JavaScript on page load. The problem is most evident when there is some content that needs to be hidden initially and when the document is large or complex.

Let’s just say that it’s a semantic container like a DIV element that encases a simple unordered list or any content for that matter, you can add the following <div class="pre-render"> to the DIV container.

On smaller websites that have pages with a more reasonable length, the standard jQuery code would work just fine:

$('html').addClass('js');
$(document).ready(function () {
    $('.pre-render').hide();
});

However if you are working on a larger website, you may have to call function this in many parts of the website so in my opinion you may want to externalise your script:

$('html').addClass('js');
var mylib =
{
    primary_functions :
    {
        init : function()
        {
             $('.pre-render').hide();
        }
    },
    specific_template_functions :
    {
        init : function()
        {
             // Functions go here
        }
    }
}
$(window).load(function(){
    // It's more efficient to load any generic scripts after the HTML has loaded.'
    mylib.primary_functions.init();
});

If the document is large then that won’t work as there is a lot of document to load before the JavaScript is called, even if you use the $(window).load method as above. Therefore using JavaScript to hide elements like this just won’t work unless the scripts are placed in the HTML immediately following the elements they’re hiding.

Why use JavaScript for this, anyway?

The initial retort from some developers is “this is what what CSS is for!” Well it is easy to add a rule to the stylesheet (CSS), such as .pre-render {display: none;}, and the problem would be solved.

However the pure CSS method introduces another problem: the hidden content is completely unavailable to those who have CSS enabled/available but JavaScript disabled/unavailable. These users simply won’t be able to view the content. Now, some developers don’t have a problem with that, but I do. It’s all about accessibility and making content as available as possible, even if on a basic level.

A quick solution

Instead of using just one or the other to solve the problem, combine the two together using a hybrid method.

Your CSS:

    

Your HTML:

    
      
        
        
      
      
        
        
        
      
    

Your JavaScript:

Your JavaScript can be in either of the above methods depending on the size of your website. Personally I prefer using the latter method simply for good practice. You don’t have to call ALL of your JavaScript each time the page loads.

You probably noticed that the script references are at the bottom of the page. It’s also good practice to have your scripts load at the bottom if you can help it. If you using WordPress, may not seem that easy but there are ways to do it.

Just make sure that this is included within your JavaScript file BEFORE $('.pre-render').hide();. Outside the script call as above:

$('html').addClass('js');

In order to make sure this works, the .addClass() method is plaeced not inside $(document).ready() and it is first in the other method. If we had put it inside, we’d be back to square one.

However since I am using YUI’s recommendations to put scripts at the bottom, this can still make this solution work.

    

Placing the above in the head of your HTML document after the CSS reference should have it working nicely. Happy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *