Question

Fist off, been lurking for years, hopefully this post will be helpful to more than just me.

So I have a jstree that is generated for my site using very a small amount of JavaScript. Ideally, I would like for the page to load and show the 2 top folders only.

However, currently the page displays all of the names of the folders, subfolders, files, etc. for about 0.5 seconds before switching to the proper view. There are probably about 200 items in the tree structure

I added a manual tree.bind which does a “close_all”, and I also tried hiding the DIV that it eventually appears in. Even though I put the code to show the DIV after I create the tree, it still shows everything before hiding itself.

I am using jsTree 1.0-rc3

Anyone have any thoughts?

<script type="text/javascript">

(document).ready(function () {
    var tree = $("#sharepointHierarchy");
    tree.bind("loaded.jstree", function (event, data) {
    tree.jstree("close_all");
    });

    $("#sharepointHierarchy").jstree({
        'plugins' : [ "themes", "html_data", "types", "ui" ],
        'core' : {/* core options go here */},
    });
        document.getElementById("sharepointHierarchy").style.display="block";
});
</script>

Answer 1

I was able to mask this issue by adding the following code to the end of the function(). It is fairly straight-forward and simply gives the table time to load before showing it.

setTimeout(function() {
    $("#sharepointDiv").show();
    },1200);

I hope this helps someone else also.