jstree document ready to late

Question

i have a problem with a jQuery based website. My website use jsTree for displaying a TreeView on my website. I load jsTree this way:

$(function () {
    $('#jstree').jstree({
        "plugins":
        [
            "json_data", "ui", "hotkeys", "sort", "search", "state", "wholerow"
        ]
    });
});

Now the problem is, that my website is rendered with a little delay. For a second the user can see all html-elements without the jsTree style and functionality.

Loaded website:

After a second:

Maybe some one has any idea, that would be nice! Thank you!

Answer 1

You have stumbled across a FOUC. A flash of unstyled content (FOUC) is an instance where a web page appears briefly with the browser's default styles prior to loading an external CSS stylesheet, due to the web browser engine rendering the page before all information is retrieved. The page corrects itself as soon as the style rules are loaded and applied; however, the shift is quite visible and distracting.

There are many ways to fix, the most popular probably being hiding the div or element that displays your content until it is ready.

I'm guessing #jstree is a div, if so you would do this:

<div id="jstree" style="display:none;">

then when dom is ready you would unhide it:

$( document ).ready(function() {
    $('#jstree').show();
});