为什么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文件包含在顶部或底部？看起来你的脚本有一个'ready'部分，一旦DOM准备好就会执行。由于您的脚本将更改页面视图（对于JS树），您希望尽早加载JS，以便您的页面不会花费很长时间在用户面前重绘自己。尝试在HTML主题部分中包含与JS Tree相关的Javascript。

Answer 2

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