一,引入三个文件

jQuery版本使用 jQuery v1.7.1
jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做数据加载时使用
jquery.blockui.min.js 放有loading.gif图片及样式

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>

<script type="text/javascript" src="/js/jquery.blockui.min.js"></script>

二,html部分

①.<div id="GroPro">最外层div<div>
②.修改load未铺满全文的bug
获取网页正文全文高度：document.body.scrollHeight

<script type="text/javascript">

    //初始化数据前

    $(document).ready(function () {

         window.onload = function () {

             getHeight();//调用函数

         };

          function getHeight() {

              var Load = document.getElementById('GroPro');//获取Load的高度

              var body_height = document.documentElement.scrollHeight;//document.body.clientHeight中在<!DOCTYPE html>声明下会返回0

              Load.style.height = body_height + 'px';//将正文的高度赋值给Load

          }

    });

</script>

①.PageRefreshLockHolder方法(最上方)

// 页面级刷新锁持有（可用于防止页面数据重复加载）

var PageRefreshLockHolder = {

        // 可以注册加锁/解锁的事件（暂不支持）

    events:{},

    // 被加锁视图集合

//    lockedObject:{'mapView':'0', 'leftView':'0', 'rightView':'0', 'rightAvgView':'0'},

    lockedObject:{'OneView':'0'},

    // 加锁动作（暂时只支持全加锁，不支持单独加锁）

    lockAll:function() {

        jQuery("#GroPro").block();

        this.lockedObject.OneView = '1';

    //    this.lockedObject.leftView = '1';

    },

    // 解锁动作（各视图组件调用通知解锁）

    unlock:function(viewName) {

        this.lockedObject[viewName] = '0';

        if (!this.isExistLock()) {

            jQuery("#GroPro").unblock();

        }

    },

    // 判断是否有锁

    isExistLock:function() {

        /*

        if (this.lockedObject.mapView == '0'

        && this.lockedObject.leftView == '0'

                && this.lockedObject.rightView == '0'

                    && this.lockedObject.rightAvgView == '0') {

            return false;

        } else {

            return true;

        }

        */

        if (this.lockedObject.OneView == '0') {

                return false;

            } else {

                return true;

            }

        }

};

②.初始化数据时先,锁定页面

$(function(){

    // 锁定页面

    PageRefreshLockHolder.lockAll();

});

③.账期切换(切换按钮时),相当于刷新数据

// 锁定页面

PageRefreshLockHolder.lockAll();

④.通过ajax请求数据时:(同一个页面的数据在同一个ajax中请求完成)

$.ajax( {

    success : function(data) {

        //最下方

        // 数据请求完,解锁

        PageRefreshLockHolder.unlock("OneView");

    }

});

⑤.在刷新左右上下页面后,解锁

PageRefreshLockHolder.unlock("OneView");

⑥.
如果一个页面的数据是在同一个ajax中请求的,只在一个ajax中解锁页面就可以了.
如果页面中各版块数据在不同ajax中请求的,那么需要在各个版块的ajax中解锁.

页面数据加载完成时,显示loading页面.数据加载完,loading隐藏.的更多相关文章

  1. Repeater为空时显示“暂无数据”，很方便实用方法

    Repeater为空时显示“暂无数据”,很方便实用方法 <FooterTemplate>   <asp:Label ID="lblEmptyZP" Text=&q ...

  2. Flex中如何通过showAllDataTips属性使鼠标移动到图表时显示所有的数据Tips的例子

    原文 http://blog.minidx.com/2008/11/10/1616.html 接下来的例子演示了Flex中如何通过showAllDataTips属性,使鼠标移动到图表时显示所有的数据T ...

  3. Nodejs：npm run build之后，dist\index.html页面在火狐中可以正常显示登录页面并登录成功，在Chrome中可以正常显示登录页面，登录失败

    问题描述:Nodejs:npm run build之后,dist\index.html页面在火狐中可以正常显示登录页面并登录成功,在Chrome中可以正常显示登录页面,登录失败 解决方法:将打包后的d ...

  4. 如何在PL/SQL Developer 中设置 在select时 显示所有的数据

    在执行select 时, 总是不显示所有的记录, 要点一下, 下面那个按钮才会显示所有的数据.     解决方法: Tools>Preferences>Window Types>SQ ...

  5. Repeater在无数据记录时显示暂无数据

    原文:Repeater在无数据记录时显示暂无数据 方法就是在FooterTemplate加个Label并根据repeater.Items.Count判断是否有记录.关键代码如下: <Footer ...

  6. 爬虫数据使用MongDB保存时自动过滤重复数据

    本文转载自以下网站: 爬虫断了?一招搞定 MongoDB 重复数据 https://www.makcyun.top/web_scraping_withpython13.html 需要学习的地方: Mo ...

  7. 定一条数据用: => slot-scope属性,再显示对应的数据

    通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据: {{scope.row}} =>获取整行的数据 {{sco ...

  8. 加载 CSS 时不影响页面渲染

    转自:http://www.oschina.net/translate/loading-css-without-blocking-render 本文展示了一种技术,它能通过异步下载样式表,以阻止它们的 ...

  9. 笔记-返回到前一个页面时显示前一个页面中ajax获取的数据

    笔记第一部分:http://www.cnblogs.com/zczhangcui/p/6869219.html 在第一部分遇到的问题是,用ajax获取了一系列列表信息后,拼接好html后插入到了原有页 ...

随机推荐

  1. raycaster选取捕获obj模型&&选中高亮代码

    目录 raycaster选取捕获obj模型&&选中高亮代码 raycaster关键代码 选中高亮代码 obj整体上色 raycaster选取捕获obj模型&&选中高亮代 ...

  2. Oraclecloud创建时没有上传公钥的解决办法

    https://blogs.oracle.com/cloud-infrastructure/recovering-opc-user-ssh-key-on-oracle-cloud-infrastruc ...

  3. 03、CPU主频，和性能

    性能?时间的倒数 有两个指标:一个是响应时间或者叫执行时间:一个是吞吐率或者带宽,这两个就可以理解为办事的时间和办事的多少. 而 性能= 1/响应时间 CPU时钟:计算机的计时单位 程序的CPU执行时 ...

  4. SQL中查询现有未释放连接

    SELECT dbid,count() FROM [Master].[dbo].[SYSPROCESSES] WHERE spid> and status='sleeping' group by ...

  5. MySql的动态语句foreach各种用法比较

    1.单参数List的类型: 上述collection的值为list,对应的Mapper是这样的 2.单参数array数组的类型: 上述collection为array,对应的Mapper代码: 3.自 ...

  6. linux10.日志服务器建立和克隆机的网卡问题

    日志服务器建立       克隆虚拟机网卡混乱问题处理           vim /etc/udev/rules.d/70-perisistent-net.rules 调整mac地址与设备的对应关系 ...

  7. RPC协议、http协议、https协议的区别

    什么是RPC协议?RPC是一种远程过程调用的协议,使用这种协议向另一台计算机上的程序请求服务,不需要了解底层网络技术的协议. 在 RPC 中,发出请求的程序是客户程序,而提供服务的程序是服务器. HT ...

  8. Python 3.8.0 final¶ Release date: 2019-10-14

    https://docs.python.org/3.8/whatsnew/changelog.html#python-3-8-0 Core and Builtins bpo-38469: Fixed ...

  9. naxsi-waf-with-ui ：dockerfile

    scollazo/naxsi-waf-with-ui Dockerfile - Docker Hubhttps://hub.docker.com/r/scollazo/naxsi-waf-with-u ...

  10. [原][C++]拒绝智能指针与指针混用，常见智能指针问题

    公司一个非专科的程序在开发过程中有些毛躁,但是又想使用些新学的技术 这天他正调试呢,发现有一个BUG怎么也找不到原因. 用的好好的内存怎么就突然被删除了呢,好好的指针,怎么就访问越界了呢 没办法,他只 ...