ajax 异步加载显示等待效果

「爱情、让人受尽委屈。」 2022-05-12 00:54 212阅读 0赞

原文地址：[https://www.cnblogs.com/zengdingxin/p/5725061.html][https_www.cnblogs.com_zengdingxin_p_5725061.html]

css：

\#loading \{  
width:170px;  
height:25px;  
border:3px solid \#C3DAF9;  
position:absolute;  
top:300px;  
left:600px;   
z-index:10000;   
background-color:\#F7F9FC;  
line-height:25px;  
vertical-align:middle;  
font-size:11pt;  
display:none;  
\}

html：

<div id="loading"><img src="$\{path\}/map/image/2012032811155512.gif" alt=""/>正在加载数据,请稍候...</div>

js：

$.ajax(\{  
async: true,  
beforeSend: function () \{  
    ShowDiv();  
\},  
complete: function () \{  
    HiddenDiv();  
\},  
type : 'POST' ,  
url : '',  
data : \{  
  
\},  
success: function (data) \{  
//var obj = JSON.parse(data);  
//var str = JSON.stringify(obj);  
  
  
  
\}  
\});

//显示加载数据  
function ShowDiv() \{  
$("\#loading").show();  
\}

//隐藏加载数据  
function HiddenDiv() \{  
$("\#loading").hide();  
\}

图片：

![525478-20160801110927215-1304049696.gif][]

[https_www.cnblogs.com_zengdingxin_p_5725061.html]: https://www.cnblogs.com/zengdingxin/p/5725061.html
[525478-20160801110927215-1304049696.gif]: /images/20220512/61dde89743e544b58a8f659ab6e5f5b6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，212人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android开发中用到的加载等待效果

使用idea结合gradle进行安卓开发，在引入第三方库或者功能的时候，简直太方便了，简单配置几行代码，就能直接使用带有界面资源的第三方功能，这简直太爽了，回...

旧城等待，/ 2024年04月18日 19:22/ 0 赞/ 58 阅读

相关 Echarts异步使用ajax 加载数据

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaX...

痛定思痛。/ 2024年04月17日 06:26/ 0 赞/ 75 阅读

相关 (Jquery 功能篇) Jquery ajax异步加载

1.前段页面效果 ![0_1321067854XbbX.gif][] 2.前段页面代码 \[html\] [ view plain][view plain] [c

- 日理万妓/ 2023年10月16日 19:01/ 0 赞/ 37 阅读

相关同步等待异步等待_异步等待

同步等待异步等待 [JavaScript promises][] were a revelation in JavaScript, providing an alterna

落日映苍穹つ/ 2023年02月22日 01:18/ 0 赞/ 32 阅读

相关加载效果

![在这里插入图片描述][20200903154949195.png_pic_center] htmm <div id="loading-btn">

男娘i/ 2022年12月03日 12:57/ 0 赞/ 144 阅读

相关 ajax进行异步请求数据添加loading效果不显示

在做前端页面的时候，发现loading效果不显示；即使将loading代码放在ajax请求的前面也不行；代码是这样的： (function(){ m

Myth丶恋晨/ 2022年10月17日 13:58/ 0 赞/ 204 阅读

相关 jquery ajax 加载数据的时候异步显示加载动画

http://blog.csdn.net/szstephenzhou/article/details/39318415 ajax加载后台数据就不说的那么细了。看下面

悠悠/ 2022年08月20日 13:23/ 0 赞/ 216 阅读

相关 ajax 异步加载显示等待效果

原文地址：[https://www.cnblogs.com/zengdingxin/p/5725061.html][https_www.cnblogs.com_zengding

「爱情、让人受尽委屈。」/ 2022年05月12日 00:54/ 0 赞/ 213 阅读

相关 Ajax加载数据中的loading效果

如题，不难理解，故不多做介绍，直切主题。在html任意位置放置loading图标： <div id="cisLoading"> <img src="/s

深碍√TFBOYSˉ_/ 2022年02月01日 00:06/ 0 赞/ 456 阅读

相关 Java Echarts 实用小例子(Ajax异步加载)

实际echarts中，数据都是从数据库中动态获取过来。所以这里来简单演示一下echarts怎么通过ajax异步获取数据库中的数据在页面上进行动态展示。下面只是功能代码展示，具体

蔚落/ 2022年01月27日 09:45/ 0 赞/ 424 阅读