前言
最近在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等样式来定位否则分辨率不同的情况下，可能就不一样了。
以上缺点确实有待改善，由于本人时间和精力有限，项目紧，所以不再追求功能的更高质量了，如果正在读文章的您，有时间有兴趣有能力研究出来的话，非常欢迎你留言解答，以便您，我，还有大家共同进步与学习！
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
