jquery - 如何在带有花式树的绑定(bind)下拉列表数据上显示加载图像

Question

在下拉列表值更改时，我调用 ajzx 操作以获取数据库值并将数据库值构建为 Html(在 Controller 中)和 Ajax 的 onSuccess，Html 附加到 div。直到这个过程很快，我可以在几秒钟内获得数据。附加的 Div 元素被转换为需要很长时间才能加载的 fancytree(插件)，因此要求显示“正在加载...”图标仍然是绑定(bind)完成的。我在谷歌上搜索了很多并且厌倦了很多但没有任何效果，在将 div 转换为 fancy Tree 期间图像没有加载。下面显示了我厌倦的代码。

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;
}

在 View 中:

<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;
}