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

最新推荐文章于 2024-03-25 14:33:51 发布

Java我人生

最新推荐文章于 2024-03-25 14:33:51 发布

阅读量1.1w

点赞数 1

分类专栏： javascript jQuery 文章标签：正在加载功能页面加载等待实现 js实现页面加载等待 jQuery加载等待页面等待加载功能

本文链接：https://blog.csdn.net/chenleixing/article/details/45145997

版权

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

摘要由CSDN通过智能技术生成

前言

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