Javascript 为什么页面加载时jstree显示为断开

我正在Smartwcm web应用程序SDK的所有页面中使用。我发现每次加载页面时，jstree插件都会在显示正确视图之前显示一个不完整的状态。我附上下面两个视图的截图

我有一些截图可以更好地解释这个问题：

当页面仍在加载时，jstree

---

页面加载完成后的jstree

---

我使用jquery-1.11.2、Bootstrap v3.0.3和jsTree-v3.0.0-beta10

我正在添加用于jstree的部分代码（名为Manage My Images的树节点的代码部分），如下所示：

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
            onclick="location.href='${rc.getContextPath()}/module/simplewebcontent/landing/'">
            <span class="iconImg"><img src="/layout/common/adminv3/img/left_img_2.png" alt="image"></span>Manage Contents<span class="glyphicon glyphicon-chevron-down"></span> </a>
        </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse <#if cm.module == 'simplewebcontent'>in</#if>" >
        <div class="panel-body" id="jstreeSection">
            <div id="jstree1" class="demo">
                <ul>
                    <li data-jstree='{ "icon" : "glyphicon glyphicon-book" }' class="jstree-open">
                        My Contents
                        <ul>
                            <li data-jstree='{ "icon" : "glyphicon glyphicon-book" }' class="jstree-open">
                                Manage My Images
                                <ul>
                                    <li data-jstree='{ "icon" : "glyphicon glyphicon-plus" <#if cm.section == 'addimage'>, "selected" : true</#if> }'><a href="#" onclick="location.href='/module/simplewebcontent/uploaddocimagecontent?type=I'">Add Image</a></li>
                                    <li data-jstree='{ "icon" : "glyphicon glyphicon-list-alt" <#if cm.section == 'listmyimages'>, "selected" : true</#if>}'><a href="#" onclick="location.href='/module/simplewebcontent/liststaticcontents?ownedby=me&type=I'">List My Images</a></li>                                            
                                </ul>
                            </li>       

                        </ul>
                    </li>
                </ul>
            </div>                  

    </div>          

</div>

---

您的JS文件包括在哪里，在顶部还是底部？看起来您的脚本有一个“就绪”部分，在DOM就绪后立即执行。由于脚本将更改页面视图（对于JS树），因此您希望尽早加载JS，这样页面就不会在用户面前花费很长时间重新绘制自己。尝试在HTML标题部分包含JS树相关的Javascript。

我看到您使用的是v3.0.0-beta10版本。您是否尝试过将JS tree更新为最新版本：3.1.0？

目前我正在页面底部添加JS文件。我还尝试在页面顶部加载JS文件，但这无助于解决此问题。我没有尝试更新jstree版本，但这可能会导致此问题……我将尝试您的建议……谢谢

$(function ()
{

    $('#jstree1').jstree();

});