Question

在下拉列表值更改时，我调用ajzx操作来获取数据库值并将数据库值构建为Html（在控制器中）和在Ajax上的onSuccess，Html被附加到一个div。直到这个过程是速度，我可以在几秒钟内获得数据。附加的Div元素转换为fancytree（插件），这需要很长时间才能加载，因此要求显示“正在加载...”＃39;图标仍然绑定完成。我google了很多，累了很多但没有任何工作，在将div转换为花式树时图像没有加载。显示在我厌倦的代码下面。

CSS：

#dvLoading {
   background:#000 url(images/animated-overlay.gif) no-repeat center center;
   height: 100px;
   width: 100px;
   position: fixed;
   z-index: 1000;
   left: 50%;
   top: 50%;
   margin: -25px 0 0 -25px;
}

在视图中：

<div id="dvLoading"></div>

JS中的

drawOrganiTree: function (result) {
    "use strict";
    var ns = SocietaEStruttureHome.index;
    var res = "<div id='divOrgTree' >" + result + "</div>";
    $("#divOrgStructure").append(res); //append the HTML data 

    //$(window).load(function () { $("#dvLoading").fadeOut(20000); });
    $("#dvLoading").show(); // Here to show the Loading image

    $("#divOrgTree").fancytree();

    $("#dvLoading").show(); //Here to hide the Loading image
    //Expand all the node of the tree on load
    $("#divOrgTree").fancytree("getRootNode").visit(function (node) {
        //node.setExpanded(true);
    });

    $("#btnModify").show();
},

我在这里做错了什么。请帮忙。

Answer 1

试试这个：

<div id="dvLoading" class="spinner-loading" style="display: none;">
   <img id="img-spinner" alt="Loading" src="http://www.vetsbye.com/eng/img/loader.gif">
</div>

CSS：

.spinner-loading {
   background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
   height: 100%;
   overflow: auto;
   position: fixed;
   text-align: center;
   width: 100%;
   z-index: 1234;
}

如何使用花式树在绑定下拉列表数据上显示加载图像

1 个答案: