正在加载中-js/jQuery功能实现
前言
最近在springMVC中集成一个基于jsp报表工具,在集成之后的,由于报表运算量很大,SQL语句比较复杂,所以前台点击按钮触发以后,呆上几秒才有反应过来弹出报表框,所以想加入一个类似正在加载中的有好提示,使客户体验更好,不过没想象的那么容易,主要是产品采用的freemarker模版引擎,加载封装的dialog方法不能直接访问页面且不能直接向页面传参等等,不过问题都被我一一解决了,废话不多说,直接切入正题,主要看看这个小功能的简单实现吧。
引入如下HTML元素
<body> <div style="width:100% !important;height:850px;text-align:center;"> <div id="loading" style="margin-top:200px;"> <p> <img src="loading图片路径/loading.gif" width="30xp" height="30px" /><br/> <font style="height:30px;vartical-algin:center;padding-left:5px"> 正在统计中,请稍等......</font> </p> </div> <iframe id="reportIframe" src="" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" width="100%" height="100%"> </iframe> </div> </body>
当然,我的是根据本项目封装的组件而定的,你可以不需要外层div或者不需要直接限定高度等等。
js/jQuery关键代码
$(function(){ var frameUrl="frame里的要加载页面的路径"; $("#reportIframe").attr("src",frameUrl); $("#reportIframe").load(function(){//jQuery控制“加载”div不显示 $("#loading").css("display","none"); }); });
效果
后记
如果你认真看完后,确实是,不完美,等待字样和图片要是浮在iframe所在内容之上就好了,这样iframe加载过度过程中与“正在加载”的字样和图片过度的就很缓和贴切,再就是“正在的加载”的字样和图片最后能直接定位在弹出框的中央而不是用margin,padding等样式来定位否则分辨率不同的情况下,可能就不一样了。
以上缺点确实有待改善,由于本人时间和精力有限,项目紧,所以不再追求功能的更高质量了,如果正在读文章的您,有时间有兴趣有能力研究出来的话,非常欢迎你留言解答,以便您,我,还有大家共同进步与学习!
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。