ajax 异步加载显示等待效果
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();
}
图片:

ajax 异步加载显示等待效果的更多相关文章
- Scrapy爬虫框架教程(四)-- 抓取AJAX异步加载网页
欢迎关注博主主页,学习python视频资源,还有大量免费python经典文章 sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction ...
- jQuery的AJax异步加载
主要用到load()方法以及getScript()方法,具体以一个例子说明: 在现有html文件中加载一个拟好的片段,以及在片段加载完成之前阻止用户进一步操作的弹出框. 首先是现有html代码,无任何 ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- ajax异步加载问题
使用ajax异步加载数据,在之后需要用到这个数据时,应该将之后的js一并写入ajax函数中,否则后面的js不能找到动态拼接的dom节点. 或者将其封装成方法,在ajax动态加载数据的最后调用该方法.
- Ajax 异步加载
AJAX (Asynchronous JavaScript and XML,异步的 JavaScript 和 XML).它不是新的编程语言,而是一种使用现有标准的新方法,是在不重新加载整个页面的情况下 ...
- 使用Ajax异步加载页面时,怎样调试该页面的Js
前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析U ...
- ajax异步加载回跳定位
1)首先,问题是这样的:page1在一个滚动到页面底部加载更新的函数(功能),当页面滚动了第二页(或更多页)时,点击链接跳转到了其他页面(page2),在page2有返回按钮,当从page2返回pag ...
- Ajax全局加载框(Loading效果)的配置
在Ajax进行后台数据请求的过程中,我们有时候会希望用户能知道页面后台还在做一些事情,这时候就需要给用户一个非常明确的提示,也就是我们所谓的进度条 废话完成~ 实现原理: Jquery可以对ajax进 ...
- css 实现页面加载中等待效果
<!DOCTYPE html> <html> <head> <title>css实现页面加载中,请稍候效果</title> <meta ...
随机推荐
- window.onload和window.document.readystate的探究
在编写前端页面的时候,我们时常需要对页面加载的状态进行判断,以便进行相应的操作. 比如在移动端,时常需要在页面完全加载完成之前,先显示一个loading的图标,等待页面完成加载完成后,才显示出真正要展 ...
- jQuery.fn.extend() 与 jQuery.extend()
jQuery.fn如何扩展. jQuery插件 $.fn(object)与$.extend(object) jQuery提供了两个方法帮助开发插件 $.extend(object);扩展jQuery类 ...
- docker help
localhost == 127.0.0.1 == 本机ip ifconfig 或者 ip addr 查看本地宿主机的ip地址 $ docker help Usage: docker [OPTIONS ...
- nginx 配置全站404(百度闭站保护)
在百度站长里申请闭站保护时,需要全站404.可能过nginx配置实现 location / { #root html; #index index.html index.htm; retur ...
- VS有效序列号
VS2005 : KYTYH-TQKW6-VWPBQ-DKC8F-HWC4J VS2008 : PYHYP-WXB3B-B2CCM-V9DX9-VDY8T VS2010 : YCFHQ-9DWCY-D ...
- 第六百一十八天 how can I 坚持
此刻好烦,乱七八糟的,红米2死机也没弄好,哎. 下周三去长城,感觉还有很大提升空间啊,什么都不会.哎. 眼累的不行了,得抓紧睡觉了.ls他们来北京开年会了.. 明天,zjp来找我玩呢. 睡觉了.累.
- angular表单
angular的表单,点击确定进行创建,支持批量创建,表单验证有样式提醒; <!DOCTYPE html> <html lang="en"> <hea ...
- python---IO多路复用
这里的IO是指网络IO python中通过select模块实现IO多路复用,select模块中有select.poll.epoll等方法 下面例子以select模块实现IO多路复用 仅仅只有IO多路复 ...
- C# 小例子
数组冒泡排序(升序排序): , , , , , , , , , , , }; //第一种 ; i < num.Length - ; i++) { ; j < num.Length - i ...
- 针对bootstrap内联单选框input与文字不能居中对齐的解决办法
1.html代码 <div > <label class="checkbox-inline first-label"> <input type=&qu ...