Comment charger l'image lors de la liaison des données de la liste déroulante avec l'arborescence

Question

Lors de la modification de la valeur dropdownlist, j'appelle l'action ajzx pour obtenir les valeurs de DB et construire les valeurs DB en Html (dans controller) et onSuccess of Ajax le Html est ajouté au div. Jusqu'à ce que le processus est la vitesse et je peux obtenir les données en quelques secondes. l'élément Div ajouté est converti en fancytree (plugin) qui prend beaucoup de temps à charger, donc l'exigence est d'afficher l'icône 'Chargement ...' tout de même la liaison terminée. Je googlé beaucoup et fatigué beaucoup de sorte mais rien ne fonctionne, l'image ne se charge pas lors de la conversion de la div à l'arbre de fantaisie. Montré ci-dessous le code que j'ai fatigué.

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

dans Vue:

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

dans 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(); 
}, 

que je fais quelque chose de mal ici. aidez s'il vous plaît.

Answer 1

Essayez ceci:

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