正在加载中-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等样式来定位否则分辨率不同的情况下，可能就不一样了。

      以上缺点确实有待改善，由于本人时间和精力有限，项目紧，所以不再追求功能的更高质量了，如果正在读文章的您，有时间有兴趣有能力研究出来的话，非常欢迎你留言解答，以便您，我，还有大家共同进步与学习！