为什么页面加载时jstree出现损坏

Question

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

我有可以更好地解释问题的屏幕截图：

1. 页面仍在加载时的 jstree

---

1. 页面加载完成后的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>

这个jstree的javascript函数是：

$(function ()
{

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

});

Answer 1

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

Answer 2

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