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

最新推荐文章于 2017-07-21 16:07:53 发布
最新推荐文章于 2017-07-21 16:07:53 发布
阅读量1.1w 收藏 3
点赞数 1
分类专栏： javascript jQuery 文章标签： 正在加载功能 页面加载等待实现 js实现页面加载等待 jQuery加载等待 页面等待加载功能
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenleixing/article/details/45145997
版权

前言

       最近在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=
最低0.47元/天 解锁文章
Java我人生
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JSP页面加载loading效果图
知识改变命运，ヾ(◍°∇°◍)ﾉﾞ【求关注】
12-23 1797
//加载层-默认风格 layer.load(); //此处演示关闭 setTimeout(function(){ layer.closeAll('loading'); }, 3000); Layer.js地址
利用JS弹出层实现简单的动态提示“正在加载中，请稍等...”
热门推荐
追逐梦想
03-15 5万+
最近项目中大量用到了JQuery中的Ajax异步加载数据，数据量非常大，导致每次加载的时候都感觉到非常非常慢，让客户体验非常不好，就想到用JS做一个简单的提示。 JQuery版本：1.7.1； 编写一个JS类(ck.layer.js)： /************************************* Achievo.Javascript Library ************
jquery的ajax提交时“加载中”提示的处理方法
lhzjj的专栏
10-23 2万+
方法1：使用ajaxStart方法定义一个全局的“加载中。。。”提示 $(function(){     $("#loading").ajaxStart(function(){         $(this).html.("");       });       $("#loading").ajaxSuccess(function(){         $(this).html.(
jquery实现页面提示，数据正在加载中
冷夜轩的博客
07-21 1万+
jquery实现页面提示，数据正在加载中
一个适合做页面 “加载中” 效果的插件 jquery-loading
10-26
一个适合做页面 “加载中” 效果的插件 jquery-loading 非常简单实用！！
jquery-3.3.1.js/min.js
12-26
在本篇文章中，我们将深入探讨jQuery 3.3.1版本，了解其在简化DOM操作、事件处理、动画效果以及Ajax请求等方面的核心功能。 一、DOM操作 jQuery的核心功能之一是提供对DOM（Document Object Model）的简洁API，...
big-and-small--jquery.rar_JavaScript/JQuery_JavaScript_
08-11
标题中的"big-and-small--jquery.rar"表明这是一个关于使用jQuery实现元素放大缩小功能的示例项目。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互，使得JavaScript编程变...
jquery-1.9.1.min.js_javascript_jquery_
09-30
jQuery 1.9.1.min.js 是这个库的一个特定版本，经过压缩优化，用于在实际网站上提高性能和减少页面加载时间。 **jQuery 的主要特性** 1. **DOM 操作**：jQuery 提供了一套方便的函数来选择、遍历和操作HTML元素。...
jquery-2.0.0.zip_JavaScript/JQuery_JavaScript_
08-09
在"压缩包子文件的文件名称列表"中提到的`jquery-2.0.0.js`是jQuery库的源码文件，包含了所有上述功能的实现。开发者可以直接引入这个文件到项目中，开始使用jQuery提供的各种功能。 总之，jQuery作为JavaScript的...
geo-master.zip_JavaScript/JQuery_JavaScript_
08-11
在地理信息系统中，JavaScript可以用于构建交互式的地图界面，实现地图的平移、缩放、标记添加等功能。此外，JavaScript的灵活性使其能够轻松地与其他技术如JSON、Ajax等进行集成，从而获取和展示地理位置数据。 ...
页面加载中js 页面加载中js 页面加载中js
08-14
页面加载中js 页面加载中js 页面加载中js 页面加载中js 页面加载中js
页面加载中loading（js、asp.net）
09-28
页面加载中loading（js、asp.net）
js实现等待加载“转圈圈”效果
jack_yih的博客
06-29 2万+
js代码:                     function showLoading(show){ if(show){    document.getElementById("over").style.display = "block";    document.getElementById("layout").style.display = "block"; }else{ d
js页面中实现加载更多功能
weixin_30439131的博客
09-01 1190
　　分页-如何实现加载更多功能，目前的在很多网站上使用的加载更多功能中，使用最多的是iscroll.js实现的上拉加载更多、下拉刷新功能。但是iscroll.js本身并没有集成加载更多的功能，需要进行自行扩展。 　　最简单的就是给一个加载更多的按钮，实现假分页加载更多，也就是页面上是全部的数据，只是按照页面显示要求，自己规定显示部分范围，其余隐藏。如果还有数据，点击下加载更多，继续拉几条数据；直...
一个jquery插件,页面上的等待提示
axe的专栏
04-15 4492
New Document /** * 使用方法: * 开启:MaskUtil.mask(); * 关闭:MaskUtil.unmask(); * * MaskUtil.mask('其它提示文字...'); */ // MaskUtil Start var MaskUtil = (function(){ var $mask,$maskMsg; var d
jqLoading加载进度条使用
自由的刺猬
12-30 3898
jsp页面中要引入jquery-ui-jqLoding.js文件，才可以用这个加载进度条，自行百度下载哈~~ 假设你的页面中已经引入了该js文件，当你用ajax方式提交数据的时候，万一响应时间有点长，可以用这个插件，这样用户体验不会太差。js代码如下： var fd = new FormData(document.getElementById("testForm")); var excelFi
很多人想要的Jquery 加载Loading效果，可以加到自己的项目中，结合Ajax使用
diehe5608的博客
09-12 229
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>...
EasyUI-DataGrid多行动态选择性合并算法实现
Java我人生的技术博客
03-12 1万+
jQuery EasyUI中有一个很好用的数据列表控件，即DataGrid控件，后台以一定的json格式传给控件就能在前台展示出来，功能很强大，不过有时需求需要这样即多行合并，如在列表中如果相同的部门字段上下合并达到Excel展示相同的效果，而且有时不止这一个字段的合并，还有其他字段根据内容相同或者其他字段的ID相同啊进行合并。        官网上没有对应的类似的Demo，可能开发中遇到这种情
<!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="libs/jquery-3.6.0/jquery-3.6.0.min.js" ></script> <script src="libs/bootstrap-4.5.3-dist/js/bootstrap.bundle.min.js" ></script> <script src="libs/bootstrap-4.5.3-dist/js/bootstrap.min.js"></script> <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
最新发布
06-07
这是一个 HTML 代码片段，其中引入了 jQuery、Popper.js 和 Bootstrap 的 JavaScript 库，以及一个名为 `index.js` 的自定义脚本文件。 具体来说，这段代码的作用是： 1. 引入 jQuery 库的 3.6.0 版本，用于简化 JavaScript 的编写和操作。 2. 引入 Bootstrap 的 JavaScript 库，其中 `bootstrap.bundle.min.js` 包含了 Popper.js 库，用于实现一些常见的交互效果，例如下拉菜单、模态框等；`bootstrap.min.js` 则是 Bootstrap 样式库的核心部分，包含了大量的样式和组件。 3. 引入一个自定义的脚本文件 `index.js`，用于实现一些与页面相关的 JavaScript 功能，例如表单验证、动态加载等。 需要注意的是，在使用 Bootstrap 的 JavaScript 组件之前，需要先引入 jQuery 和 Popper.js，否则这些组件将无法正常工作。同时，如果你需要自定义页面的一些 JavaScript 行为，可以在自定义的脚本文件中实现，这样可以使代码更加清晰和易于维护。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值