之前由於資料載入有點慢，公司需要在已有的查詢功能上做一個自定義的載入緩衝效果

css:

/*查詢資料載入緩衝樣式*/
.ajax_loading { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999; background-color: transparent; }
.ajax_loading_inner { cursor: wait; text-align: center; background-color: rgba(0,0,0,0.5); color: #fff; position: fixed; top: 50%; left: 50%; margin-left: -70px; margin-top: -48px; width: 140px; border-radius: 6px !important; font-size: 14px; padding: 58px 0 10px 0; }

/*查詢資料載入緩衝時，原有資料樣式*/
.changeGray{
width:100%;
height:100%;
color: #fff; 
position: fixed;
top: 10%; 
left: 10%; 
bottom:10%;
right:10%;
border-radius: 6px !important; 
opacity:0.5;
background-color: #efefef;
}
 

html:

 <!--查詢資料載入緩衝div-->     <div id="ajaxloading" class="ajax_loading  hide">     <div class="ajax_loading_inner" style='background:#666;'>     <!-- 載入緩衝的小圖片，基本都是圈圈或者菊花等具有緩衝效果的圖片 -->     <img style='width:20px;height:20px; position: absolute;top: 15px;left: 50%;margin-left: -16px;' src="${ctx}/static/jquery-easyui/themes/gray/images/loading.gif"/>資料載入中...</div>          </div>        <!--查詢資料載入緩衝時，覆蓋原有資料的div-->     <div id="KeepOut">     </div>
 

js:

ajaxloadbefore:function(){//載入前加入顯示緩衝效果
			$("#ajaxloading").removeClass("hide");
			$("#KeepOut").addClass("changeGray");
		}

jaxloadend:function(){//載入結束消除顯示緩衝效果
			$("#ajaxloading").addClass("hide");
$(".changeGray").removeClass("changeGray");
		}

這樣一個簡單的查詢資料載入緩衝效果就做好了

頁面展示：

加緩衝樣式之前：

加緩衝樣式之後：