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

Question

在下拉列表值更改时，我调用 ajzx 操作来获取 DB 值并将 DB 值构建为 Html（在控制器中），并且 Ajax 的 onSuccess 将 Html 附加到一个 div。直到这个过程是速度的，我可以在几秒钟内得到数据。附加的 Div 元素被转换为需要很长时间才能加载的花式树（插件），因此要求在绑定完成时显示“正在加载...”图标。我用谷歌搜索了很多，累了很多，但没有任何效果，在将 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;
}