比较常见的做法,但对我而言是第一次做,记录一下。

为了把找来的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 数据加载中禁止操作页面的更多相关文章

  1. JQuery插件:遮罩+数据加载中。。。(特点:遮你想遮,罩你想罩)

    在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...

  2. jQuery实现加载中效果,防止重复提交

    //导出表格加载中的提示var dian=0;//控制'●'的个数var t=null;//停止时使用function id_loadspot(loadspotSpan,loadingDiv,expo ...

  3. dwz ie10一直提示数据加载中

    dwz js资源jquery.validate.js 搜索 this.attr('novalidate', 'novalidate'); 在33行左右 用if (typeof (Worker) !== ...

  4. layui数据加载中遮罩层的实现

    1.load方法提供三种风格供选择. 方法一:loadIndex = layer.load(); //不传参,默认0 方法二:loadIndex = layer.load(1); // 1,另外一种风 ...

  5. APP中数据加载的6种方式-b

    我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...

  6. javascript 实现页面加载完的操作

    document.onreadystatechange = function () { if (document.readyState == "complete") {//页面加载 ...

  7. App6种常见的数据加载设计

    App6种常见的数据加载设计 设计师在进行APP设计的设计时,往往会更加专注于界面长什么样,界面和界面之间怎么跳转,给予用户什么样的操作反馈,却偏偏特别容易忽略掉一个比较重要的环节,就是APP数据加载 ...

  8. jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件

    jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...

  9. EasyUI datagrid 数据加载

    网上找了好多人的方法发现都有问题发一个可用方便的 主要分三种情况 加载1,loaddata 加载2,datagrid 加载3, url 加载 第一部分,datagrid加载 第二部分,点击 datag ...

随机推荐

  1. json和pickle的序列化

    PICKle模块:

  2. (C/C++学习)6.数组指针和指针数组

    说明:int (*p)[4] 和 int *p[4](数组指针和指针数组),如果你是一个初学者,也许当你看到这两个名词的时候,已经懵了.其实,只要你理解了其中的含义.这两个名词对你来说会相当简单并且很 ...

  3. Vova and Train (codeforces 1066A)

    数学题.用右边界以内的区间内的灯减去左边界以内区间内的灯,并且如果左边界正好有灯再减去一即可 我的代码 #include <bits/stdc++.h> using namespace s ...

  4. [HDU5807] Keep In Touch

    \(Keep\ In\ Touch\):保持联络 \(Informatik\ verbindet\ dich\ und\ mich.\) 信息将你我连结? 发现这个方程很容易列出来. \(f[i][j ...

  5. mongodb数据库的导出与导入

    数据库的导出 导出类型为json,数据库:mapdb,集合:bike 字段:bikeId,lat,lng,current_time,source ,条件为source字段为ofo第一条数据 mongo ...

  6. CVE-2014-6271 漏洞告警

    原理:BASH除了可以将shell变量导出为环境变量,还可以将shell函数导出为环境变量!当前版本的bash通过以函数名作为环境变量名,以“(){”开头的字串作为环境变量的值来将函数定义导出为环境变 ...

  7. Codeforces Round #411(Div. 2)——ABCDEF

    30min水掉前面4T,30min尝试读懂EF题,60min划水 顺便D忘记取膜丢50分,距比赛结束10s时hack失败丢50分... 从2620掉分到2520,从rank227掉到rank354.. ...

  8. java中String类型转换为float类型

    import java.io.*; public class Demo1{ public static void main(String args[]) { String df="12.2& ...

  9. [bzoj3669][Noi2014]魔法森林_LCT_并查集

    魔法森林 bzoj-3669 Noi-2014 题目大意:说不明白题意系列++……题目链接 注释:略. 想法:如果只有1个参量的话spfa.dij什么的都上来了. 两个参量的话我们考虑,想将所有的边按 ...

  10. jquery ajax CORS 跨域訪问 WebService

    JS代码: var word = document.getElementById("word").value; $.ajax({ type: "POST", c ...