加载数据之前的加载等待中效果

原创 2016年05月31日 11:37:48

eg1.

效果图:


jsp:

<div id="reportDiv" style="width: 98%; margin: 10px auto;"><div></div></div>
<div id="wait" style="width: 98%; margin: 10px auto;display:true;padding-top:45px;" align="center"><span style="color:black;font-weight:bold;">加载中,请稍后...</span><br/><img src="../../style/image/Loading.gif" style="width:100px;hight:20px;"/></div>

js:

/**
 * 查询报表
 * @return {Boolean}
 */
function query(){
var tm = $("#date").val();
var stcd = $("#stationId").val();
var stnm = $("#stationId").find("option:selected").text();
var itemId = $("#stationType").val();
var data = {
stcd:stcd,
tm : tm,
stnm:stnm
};
var url = "";
if (itemId == "PP") {
url = appPath + "/raindayreport.do";
}
else if (itemId == "ZZ") {
url = appPath + "/waterdayreport.do";
} else if (itemId == "BB") {
url = appPath + "/evapdayreport.do";
} else if (itemId == "TP") {
url = appPath + "/tempdayreport.do";
} else if (itemId == "RZ") {
url = appPath + "/leveldayreport.do";
data.trans_id = $("#trans_id").val();
data.trans_name = $("#trans_id").find("option:selected").text();
} else if (itemId == "WF") {
url = appPath + "/flowdayreport.do";
} else {
return;
}
$.ajax({
url : url,
data : data,
beforesend:function(){
 $("#wait").attr("style","display:show();");
},

type : "post",
dataType : "text",
success : function(result) {
$("#wait").attr("style","display:none;");
$("#reportDiv").html(result);
}
});
}

加载的动态图片:


欢迎各位童鞋下载!


eg2.


 <div style="margin-top:20px;padding:3px 0 3px 3px;overflow:hidden;"><h2 id="newalarm_titile" style="display:inline;">最近发布的预警信号</h2><span style="padding-left:230px;"><select id="year" onchange="chgMonth(this);"></select>  <select id="month"></select>  <input type="button" onclick="return query();" value="查询历史预警信号" /></span></div>


  <table style="width:677px;" border="0" cellspacing="0" cellpadding="0" id="new_alarm" >
  <tr>
    <th width="536" scope="col">内容</th>
    <th width="141" id="alarm_date" scope="col">发布时间</th>
  </tr>
  <tbody id="alarm_content_list">

<tr><td colspan='2'>数据加载中...</td></tr>//数据加载中

</tbody>
</table>
</div>

createScript(DATA_PATH + "szWeather/alarm/szAlarmHistory.js?"+Math.random(),initRecentAlarm);
function initRecentAlarm()
{
if(typeof SZ121_szAlarmHistory=='undefined') return;
$("#alarm_content_list").html('');//清空tbody里的内容
$("#alarm_content_list").setTemplate("{#foreach $T as record}<tr><td>{$T.record.signaltxt}</td><td>{$T.record.recdate}</td></tr>{#/for}");//向tbody里加入新的内容
$("#alarm_content_list").processTemplate(SZ121_szAlarmHistory);
}
相关文章可以参考:http://my.csdn.net/my/mycsdn?c=1817956f829c660357743d0591725252

以及:http://www.makaidong.com/博客园文/35450.shtml

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

JS实现页面加载完毕之前loading提示效果

一、JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, ...

ajax异步模式下实现等待loading(jQuery同步Ajax带来的UI线程阻塞问题及解决办法)

在与后台实现数据交互时经常会遇到一种这样的情况: 1.需要用一个ajax请求后台数据,并且要在获取到数据之后再渲染到页面,这个时候就必须用同步(async:false)。 2.然而在这个时候就会有另一...
  • web_xyk
  • web_xyk
  • 2016年11月25日 14:47
  • 6887

几种常见的载入中、loading页面效果的实现方法总结

几种常见的载入中、loading页面效果的实现方法总结 网页加载过程中提示“载入中…”,特别是使用动画效果,可以一个“等待”的温馨提示,用户体验很不错。 先说最简单的第一种,原理就是,在网页载...

js实现页面加载的等待效果

页面实现加载时的等待效果  原理是在需要等待的页面区域加一个层先覆盖加载中的页面,等待数据加载完成后把层隐藏掉        页面加载中,请等待...          ...
  • wugouzi
  • wugouzi
  • 2013年10月11日 18:01
  • 41164

正在加载数据中效果

数据保存中... 提示: 显示div:$("#gcjDhccFullScreen").css("display","block"); 隐藏div:$(...

html 提示“数据在加载中,请稍后……”

项目完成了不过因为FileNet加载数据比较慢,所以3-4条记录加载也至少要10几秒,所以客户提出要有一个提示”提示数据加载,请稍后……“这个问题。这个东西开始实现起来不太容易。开始有一个解决方案就是...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

给定A, B两个整数,不使用除法和取模运算,求A/B的商和余数

给定A, B两个整数,不使用除法和取模运算,求A/B的商和余数。 1.   最基本的算法是,从小到大遍历: for (i = 2 to A -1)          if (i * B > A)...

利用K-means聚类算法根据经纬度坐标对中国省市进行聚类

K-means聚类算法是一种非层次聚类算法,在最小误差的基础上将数据划分了特定的类,类间利用距离作为相似度指标,两个向量之间的距离越小,其相似度就越高。程序读取全国省市经纬度坐标,然后根据经纬度坐标进...

Radon变换理论介绍与matlab实现--经验交流

本人最近在研究Radon变换,在查阅了各种资料之后在此写下个人的理解,希望与各位牛牛进行交流共同进步,也使得理解更加深刻些。 Radon变换的本质是将原来的函数做了一个空间转换,即,将原来的XY平...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:加载数据之前的加载等待中效果
举报原因:
原因补充:

(最多只允许输入30个字)