将数据加载时显示的图片和文字提成公共的--实现方法
2014-02-13 11:28
579 查看
1. 页面引入loading.js。且在页面上添加<div id="loading"></div>
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
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(); } };
相关文章推荐
- MVP实现用Retrofit请求网络数据Fresco加载图片,Recyclerview CheckBox显示并实现全选删除
- Android编程实现压缩图片并加载显示的方法
- Android自定义TextView实现文字图片居中显示的方法
- Javascript实现图片加载从模糊到清晰显示的方法
- CSS实现文字半透明显示在图片上方法
- Javascript实现图片加载从模糊到清晰显示的方法
- 多种方法实现load加载完成后把图片一次性显示出来
- dedecms友情链接实现图片文字链接都显示的方法
- PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
- Bootstrap Table从服务器加载数据进行显示的实现方法
- JavaScript实现文字与图片拖拽效果的方法
- C#使用Jquery zTree实现树状结构显示_异步数据加载
- ASP.NET显示渐变图片实现方法
- Unity3d-WWW实现图片资源显示以及保存和本地加载
- js实现固定显示区域内自动缩放图片的方法
- C#中使用GDI+实现饼状图和柱状图跟数据库联接显示数据的方法
- [ActionScript 3.0] 用TextField的方法getCharIndexAtPoint(x:Number, y:Number):int实现文字在固定范围内显示
- vue实现图片加载完成前的loading组件方法