JQuery 数据加载中禁止操作页面
比较常见的做法，但对我而言是第一次做，记录一下。
为了把找来的loading.gif 的背景色设置为透明，还特意装了quicktime。
有学到一些额外的东西。
先将div及img定义好
<body>
<div id="loadingDiv">
<img src="loading.gif" style="margin-top:230px;margin-left:700px;" />
</div>
</body>
注意：在img内可以用margin-top 和 margin-left 将loading的图片调整到列表正中央。
css样式(重点)
#loadingDiv {
background-color:grey;
filter: alpha(opacity=50); <!--IE的透明度-->
opacity: 0.1;<!--透明度，数值越大越透明，不要调太小，不然gif图片会特别模糊-->
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100; <!--此处的图层要大于页面-->
display:none;
}
注意：此处用的id样式，页面初始化即启用，且已在样式内将该div设置为不显示。
之后将在js内动态调整它的隐藏与显示属性。当它显示时，将会遮盖住整个body，
用户无法对页面进行任何操作。
javascript代码：
function loadData(){
//弹出遮盖层
$("#loadingDiv").fadeTo(200,0.5);
$.ajax({
url: 'xx/xx!query.action',
dataType:"json",
type: 'POST',
success: function(data) {
//此处是加载列表数据的代码
//数据加载完毕，则关闭遮盖层
$("#loadingDiv").fadeOut(200);
}
});
}
注意：这里用了fadeTo和fadeOut来显示和隐藏div，当然也可以用 show 和 hide。
JQuery 数据加载中禁止操作页面的更多相关文章
- JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）
在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...
- jQuery实现加载中效果,防止重复提交
//导出表格加载中的提示var dian=0;//控制'●'的个数var t=null;//停止时使用function id_loadspot(loadspotSpan,loadingDiv,expo ...
- dwz ie10一直提示数据加载中
dwz js资源jquery.validate.js 搜索 this.attr('novalidate', 'novalidate'); 在33行左右 用if (typeof (Worker) !== ...
- layui数据加载中遮罩层的实现
1.load方法提供三种风格供选择. 方法一:loadIndex = layer.load(); //不传参,默认0 方法二:loadIndex = layer.load(1); // 1,另外一种风 ...
- APP中数据加载的6种方式-b
我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...
- javascript 实现页面加载完的操作
document.onreadystatechange = function () { if (document.readyState == "complete") {//页面加载 ...
- App6种常见的数据加载设计
App6种常见的数据加载设计 设计师在进行APP设计的设计时,往往会更加专注于界面长什么样,界面和界面之间怎么跳转,给予用户什么样的操作反馈,却偏偏特别容易忽略掉一个比较重要的环节,就是APP数据加载 ...
- jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件
jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...
- EasyUI datagrid 数据加载
网上找了好多人的方法发现都有问题发一个可用方便的 主要分三种情况 加载1,loaddata 加载2,datagrid 加载3, url 加载 第一部分,datagrid加载 第二部分,点击 datag ...
随机推荐
- 在Python中利用CVXOPT求解二次规划问题
工作中需要用到cvxopt,cvxopt安装有坑,大家注意下.1.首先一定要卸载numpy,无论是直接安装的,还是anaconda安装的,主要是必须用whl安装numpy才不会有包的冲突2.二次规划包 ...
- 推荐系统相关比赛-kaggle
from: 七月在线 电商推荐与销量预测相关案例 一.预测用户对哪个事件感兴趣(感兴趣不一定去参加) 用户历史参加事件.社交信息.浏览信息(app).要预测的事件 recall:召回率 准确率: 协同 ...
- [LUOGU] 1108 低价购买
统计本质不同的\(LIS\)个数. 因为本题要求的是\(N^2\)级别的算法,就直接暴力统计\(LIS\)的个数了 然后统计方案数的话加入发现有之间有一个值,以它为结尾的\(LIS\)长度和当前的相等 ...
- [LUOGU] 4933 大师
\(Orz\) \(ljt12138!\) 设状态\(f[i][j]\)表示以\(i\)为结尾,公差为\(j\)的长度大于\(1\)的数列有几个. 然后转移方程就很好想了. \(k=H[i]-H[j] ...
- Python os.listdir() 方法
概述 os.listdir() 方法用于返回指定的文件夹包含的文件或文件夹的名字的列表.这个列表以字母顺序. 它不包括 '.' 和'..' 即使它在文件夹中. 只支持在 Unix, Windows 下 ...
- 字符串匹配的BF算法和KMP算法学习
引言:关于字符串 字符串(string):是由0或多个字符组成的有限序列.一般写作`s = "123456..."`.s这里是主串,其中的一部分就是子串. 其实,对于字符串大小关系 ...
- APK动态加载框架 https://github.com/singwhatiwanna/dynamic-load-apk
https://github.com/singwhatiwanna/dynamic-load-apk
- webpack-dev-server和webpack
指导小伙伴在webstorm+nodejs环境下新建项目时,小伙伴出现了一个很神奇的问题:没有执行webpack-dev-server情况下,即使执行npm init,也不会出现package.jso ...
- 【codeforces 764D】Timofey and rectangles
[题目链接]:http://codeforces.com/contest/764/problem/D [题意] 给你n个矩形,以左下角坐标和右上角坐标的形式给出; (保证矩形的边长为奇数) 问你有没有 ...
- nyoj 307
/*这是一道最短路变形题 从每个有藏宝的地方为起点 求到各个点的可以的最大重量,相当于求出了从出口 到 一个藏宝点 所 允许的最大重量,把所有藏宝点的按重量 排序(从小到大)先到最小的藏宝点带上 宝 ...