First hair, loading things when there is no design or other hints will reduce the user experience, so wrote a simple loading layer.
Applies to touch screen and PC pages.
/* Display an intermediate floating loading@auther:lm@date:2015-6-10@rely:html5 touch screen @fun:lm_loading.show () when Ajax is performed on the page; Display @fun:lm_loading.hide (); Hidden */(function (window) {var lm_loading = {timmer:null,creatloading:function () {var div = document.createelement (' div ') );d iv.id = ' lm_loading ';d iv.innerhtml = ' loading ... ';d iv.style.cssText = ' z-index:9999;display:none; -webkit-border-radius:10px;text-align:center;position:fixed;top:50%;left:50%;margin:-50px 0 0-100px; Width:200px;height:100px;line-height:100px;background:rgba (0,0,0,0.5); color: #fff; font-size:18px; '; This.div = Div;document.body.appendchild (this.div)},show:function () {if (!this.div) {this.creatloading ();} This.div.style.display = ' block ';},hide:function () {var that = This;if (!that.div) {that.creatloading ();} Cleartimeout (that. Timmer); Timmer = SetTimeout (function () {That.div.style.display = ' none ';},200);}} window[' lm_loading '] = lm_loading;}) (window);
Display an intermediate floating loading when the page is Ajax