1. 页面引入loading.js
2. 加载数据之前进行调用。调用方法如下：
loading = new
loadingObj($("#loading"),
buildURI("images/"));
loading.init();
loading.show();
$("#service_slist").hide();
$("#listArea").empty();
$("#pageArea").empty();
$("#fw_empty").hide();
if(typeof
window.xhrCache != ‘undefined‘) {
typeof
window.xhrCache.abort == ‘function‘ &&
window.xhrCache.abort();
}
window.xhrCache = $.ajax( {
type : "post",
dataType : "text",
url: url,
data: data,
success
: function(res){
loading.hide();
………………………………
}
});
loading.js
var loadingObj = function(viewObj, imgPathPrefix){ var imgName = "loading_pa.gif"; this.css = ".loading_box{background:url("+ imgPathPrefix + imgName +") center top no-repeat; padding-top:30px; width:100%; font-size:12px; text-align:center; color:#cccccc;}"; this.html = "<div class=‘loading_box‘>正在加载中，请稍后...</div>"; this.viewObj = viewObj; } loadingObj.prototype = { init: function(){ var style = $("<style>"+ this.css +"</style>"); var head = $("head").length > 0 ? $("head").eq(0) : $("head"); style.appendTo(head); this.viewObj.html(this.html); }, show: function(){ this.viewObj.show(); }, hide: function(){ this.viewObj.hide(); } };
原文：http://www.cnblogs.com/kevin-yuan/p/3547751.html