Search code examples
cssfouc

display: none applies slow after page load

I have a page with error message hidden using display: none;

When page loads, the error message was shown briefly and then went away. It seems ccs applies slowly to the page.

How can I improve the user experience and not allow the error message to display when loading?

The page also loads a table using Ajax call. Could this affect how css applies to the page?

Thanks.

Solution

  • Simply add style="display:none;" to the actual html elements or div's on the page that you don't want to show initially. You can't rely on the CSS file right away. For example:

    <div class="error" style="display:none;">
    <span class="myerror">Hello World!</span>
</div>

    Other than this exception for the hidden areas, it's typically best to keep all your css decoupled from the page and in an external file.