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

原创 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

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

如何在搜索结果出来之前,让页面显示“等待中。。。”

在当前页面点击搜索按纽后,当前页的button onclick事件会生成一个sql语句,然后转到查询结果页面,由于查询可能很费时间,客户要求在这两个页面中加入一个提示用户正在查询,请等待的页,具体的查...
  • JOHNCOOLS
  • JOHNCOOLS
  • 2006年05月14日 16:29
  • 2018

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

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

js加载等待效果

New Document     .loadpagediv{       width:160px;       height:56px;       position: ...
  • CCC65A8780D2C
  • CCC65A8780D2C
  • 2016年12月13日 15:17
  • 1592

加载等待特效之ProgressDialog使用总结

ProgressDialog的使用  ProgressDialog 继承自AlertDialog,AlertDialog继承自Dialog,实现DialogInterface接口。 ...
  • u010661782
  • u010661782
  • 2016年03月10日 08:03
  • 700

Loading效果实现:加载新页面前的等待过渡画面

2017年11月25日 由于最近在写一个web项目,由于前端框架开发,和后台查数据的语法不成熟导致页面加载速度过慢,遂想到用loading效果来过渡: 粗略的查阅了下网上的实现方法...
  • qq576777915
  • qq576777915
  • 2017年12月02日 10:29
  • 219

页面预加载loading动画,再载入内容

默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容...
  • xiaokui_wingfly
  • xiaokui_wingfly
  • 2016年05月25日 22:15
  • 23928

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

原创被我打死了,我就是原创。 网页加载过程中提示“载入中…”,特别是使用动画效果,可以一个“等待”的温馨提示,用户体验很不错。 先说最简单的第一种,原理就是,在网页载入时在页面最中间打入一...
  • sdta25196
  • sdta25196
  • 2017年11月30日 13:34
  • 481

ajax进行异步请求数据添加loading效果

在与后台实现数据交互时经常会遇到一种这样的情况: 1.需要用一个ajax请求后台数据,并且要在获取到数据之后再渲染到页面,这个时候就必须用同步(async:false)。 2.然而在这个时...
  • qq_34986769
  • qq_34986769
  • 2017年03月07日 16:00
  • 4632

JQuery EasyUI 的加载等待效果....

前面一直在讲EasyUI的用法,我也是最近在用这个东西,觉得这个组件里面还是有很多问题,很多的不足。比如,如果你加载一个带有弹出框的表格页面,如果加载速度很慢的话会出现下面的效果:   ...
  • xwnxwn
  • xwnxwn
  • 2015年12月01日 14:11
  • 1417

正在加载数据中效果

数据保存中... 提示: 显示div:$("#gcjDhccFullScreen").css("display","block"); 隐藏div:$(...
  • syb18810107241
  • syb18810107241
  • 2014年05月05日 09:45
  • 1301
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:加载数据之前的加载等待中效果
举报原因:
原因补充:

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