javascript - 'spinner' does not appear right after call it -
i using js show 'spinner' waiting state when loading data. call showwaiting()
show 'spinner' , hidewaiting()
hide 'spinner' when data loading completed. 'spinner' not appear after calling showwaiting()
expected, appears after data finished loading (loaddata1()
). please me. thanks
below source code:
js source code:
this.showwaiting(); this.loaddata1(); this.hidewaiting(); this.function1(); showwaiting: function () { $("#progressbar").css("display", "block"); $("#waiting_popup").show(); $("#progressbar").progressbar({ value: false }); }
html of spinner:
<div id="waiting_popup" style="z-index: 999999; position: relative;"> <div class="ui-widget-overlay ui-front"></div> <div id="progressbar" style="width: 300px; margin: 18% auto; display:none;"> <div style="float: left;margin-left: 35%; margin-top: 5px;font-weight: bold;text-shadow: 1px 1px 0 #fff;">loading...</div> </div> </div>
javascript strictly single threaded, there nothing happening in browser user interface long code running. have end function after showing spinner, , use timeout start loading after browser has had chance update interface:
this.showwaiting(); var th = this; window.settimeout(function(){ th.loaddata1(); th.hidewaiting(); th.function1(); }, 0);
you should check if can make loading asynchronous. if spinner animated gif, won't move either long code running.
Comments
Post a Comment