页面loading功能的实现

最新推荐文章于 2024-07-03 09:16:08 发布
最新推荐文章于 2024-07-03 09:16:08 发布
阅读量2.4k 收藏 2
点赞数 1
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014426405/article/details/74079785
版权
本文介绍了如何在点击按钮并使用ajax调用后端服务时，在前端显示loading效果。通过在页面上添加一个id为loading的div，利用JavaScript动态改变其display属性和innerHTML，实现在请求期间显示loading页面。在请求完成时，隐藏loading效果。同时，文章还提到了使用iframe作为另一种实现方式。
摘要由CSDN通过智能技术生成

今天准备在点击一个按钮时使用ajax调用后端服务，在等待请求的返回值的时候在前端实现loading效果，而loading时加载的html页面已经写好。

主要方法为：在按钮所在页面添加id为loading的div 当页面加载时设置此div的display属性为none，并加载此div的innerHTML内容为loading对应的html页面，对应的代码为：

document.getElementById("loading").style.display="none";
document.getElementById("loading").innerHTML = '<object type="text/html" data="uavapp_comptest/cruds/html/dialog.html" width="100%" height="600px"></object>';

之后在调用ajax服务之前修改div的display属性使其可见，并重新加载div的innerHTML内容，对应代码为：

document.getElementById("loading").style.display="";
document.getElementById("loading").innerHTML =
最低0.47元/天 解锁文章
110鸢飞
关注
专栏目录
H5非常炫酷的加载特效loading
12-08
H5非常炫酷的加载特效loading,简单实用
html5制作loading效果,使用html5制作loading图的示例
weixin_39759600的博客
06-04 171
var Loading = function (canvas, options) {this.canvas = document.getElementById(canvas);this.options = options;}; Loading.prototype = {constructor: Loading,show: function () {var canvas = this....
上百个精美网页Loading效果
最新发布
qq_43422957的博客
07-03 397
loading...一键复制
HTML实现一个非常好用的Loading效果一
资深php_web工程师
12-22 814
今天在网上冲浪时发现一些非常好看的加载组件库
html新建通用loading,css实现Loading加载页面
weixin_42442653的博客
06-03 342
css实现Loading加载页面1、对应css代码.loadingPage {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: #fff;}.loadingTop {display: none;}.loadingCenter {position: fixed;left: 50%;top: 50%;z-...
使用html + css制作简易loading
weixin_43090018的博客
01-25 1333
前几天做小程序和后台管理项目的时候，产品说能否换一种loading，官方的不太好看，emmmmmmmmmmmm，那还能怎么办，只能搞了。这里的loading大部分都是基于css实现 1、通过普通的div标签实现 <div class="loading-container"></div> css .loading-container{ width: 50px; /*先将loading区域变成正方形*/ height: 50px;
JS Loading功能的简单实现
10-26
JS Loading功能是一种常见的网页交互效果，用于在页面数据加载过程中向用户展示一个加载提示，以提升用户体验。其基本原理是通过一个遮罩层（DIV）覆盖在当前页面之上，然后在此遮罩层上展示一个加载动画或文字提示...
PHP实现简单ajax Loading加载功能示例
10-20
本文将详细介绍如何使用PHP来实现一个简单的AJAX Loading加载功能，包括其原理、操作技巧以及在实现过程中需要注意的事项。 首先，AJAX的原理基于浏览器提供的XMLHttpRequest对象，该对象能够在不中断用户操作的...
页面loading插件
09-04
页面加载（loading）插件是Web开发中提升用户体验的重要工具，尤其...在提供的文件名"loading"中，可能包含了用于实现这种功能的代码片段、CSS样式或示例资源，深入研究这些内容将有助于进一步理解和实现loading插件。
AngularJS使用拦截器实现的loading功能完整实例
10-19
在AngularJS中实现loading功能通常是指在发起HTTP请求时，在界面上显示一个加载中的提示（例如一个旋转中的加载图标），并在请求完成后隐藏这一提示。这可以提升用户在等待服务器响应时的体验，避免他们认为页面已经...
vue loading 页面加载动画提示
03-29
在这个场景中，我们将讨论如何在Vue项目中实现“vue loading”页面加载动画提示。 首先，`loading.js` 文件可能是实现这个功能的主要JavaScript代码。在Vue.js中，我们可以创建一个全局组件来处理加载状态。组件...
JS实现loading效果（不需要引入任何文件，一个html，几行代码。）
06-18
没有积分可以私我邮箱liurui416@qq.com,我看到发给你。 JavaScript实现loading效果，拿过去就能够直接使用。
加载对话框（LoadingDialog）
幻梦泽的博客
08-25 2939
加载对话框（LoadingDialog）
js添加loading加载样式
hilary_front的博客
09-28 5393
在数据没拿到前添加loading加载样式，其中var loadingMask = document.getElementById(‘loadingDiv’); loadingMask.parentNode.removeChild(loadingMask); 去除加载样式，自己选择加载图片。 `var _LoadingHtml = ‘’; document.write(_LoadingHtml
使用loading动画让你的条件渲染页面更高级
知识虔诚的信徒，探索所有未知是信徒毕生的信仰
02-20 4046
如何让你的条件渲染和页面跳转更丝滑、更高级。也许只需添加一个loading动画就能做到！
element UI中loading加载框的花式用法
热门推荐
钱多多的博客
07-27 1万+
前端为了优化体验效果必不可少的就是加载框loading的使用。接口是异步的，获取数据是需要时间的，万一网络再卡顿下，总不能让用户干等着没数据的页面。那loading就必不可少了！
document.getElementById(I).style.display=““不起作用
w710537643的博客
01-05 5092
console.log("INTP") var tag = document.getElementById("INTP"); console.log(tag) tag.style.display = ""; console.log(tag.style.display) console.log("INTP") var tag = document.getElementById("INTP"); console.log(tag) tag.style.d
一个好看的js加载loading的div样式
u012698249的博客
09-22 5850
一个好看的js加载loading的div样式
layui使用tips_Layui使用jquery.tooltip.js实现悬停提示
weixin_36280540的博客
12-23 1250
.tooltip {position: absolute;z-index: 1070;display: block;font-size: 12px;line-height: 1.4;visibility: visible;filter: alpha(opacity=0);opacity: 0}.tooltip.in {filter: alpha(opacity=90);opacity: .9}.t...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值