正在加载中-js/jQuery功能实现

最新推荐文章于 2025-06-19 22:05:12 发布

原创

最新推荐文章于 2025-06-19 22:05:12 发布 · 1.1w 阅读

标签

#正在加载功能 #页面加载等待实现 #js实现页面加载等待 #jQuery加载等待 #页面等待加载功能

本文介绍了如何在页面加载大数据或复杂报表时，使用js/jQuery实现一个友好的‘正在加载中’提示功能。通过引入特定HTML元素和编写关键代码，实现了等待提示效果。虽然存在一些不足，如加载提示应覆盖在iframe内容上方并居中显示，但这是一个快速简单的解决方案，适合项目紧急情况。作者鼓励读者改进并分享经验，共同学习进步。

前言

最近在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>

最低0.47元/天解锁文章