前言

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

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

 

 

 

发布评论

分享到:

IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

jQuery实现的进度条效果详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。