ajax 异步加载显示等待效果

「爱情、让人受尽委屈。」 2022-05-12 00:54 251阅读 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 条评论，251人围观）

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

相关阅读

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

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaX...

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

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

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

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

相关 Ajax与jQuery异步加载数据

本文共1096个字，预计阅读时间需要4分钟。简介一次性从服务器数据库中读取数据并传送到前端页面上是不现实的，一方面会加重服务器的压力，另一方面客户的带宽资源也会被占

亦凉/ 2023年07月13日 03:57/ 0 赞/ 27 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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