一,引入三个文件

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. python 装饰器demo

    本质就是一个函数,这个函数符合闭包语法结构,可以在函数不需要改变任何代码情况下增加额外功装饰器的返回值是一个函数的引用 功能:1.引入日志:2.函数执行时间统计:3.执行函数前预备处理:4.执行函数后 ...

  2. CF1188B/E Count Pairs(数学)

    数同余的个数显然是要把\(i,j\)分别放到\(\equiv\)的两边 $ (a_i + a_j)(a_i^2 + a_j^2) \equiv k \bmod p $ 左右两边乘上\((a_i-a_j ...

  3. Java GUI：将JPanel添加进JScrollPane

    实现的目标: 因为在滚动框中含有很多个Java GUI 组件,因此这里采用JPanel面板包住这些组件,在用JScrollPane实现滚动 问题1:布局揉在一起 JPanel有自己默认的布局方式,因此 ...

  4. 中山纪中集训Day4双是测试（划沝） 九校联考-DL24凉心模拟Day2

    A组T1 锻造 (forging) 1.1 题目背景 勇者虽然武力值很高,但在经历了多次战斗后,发现怪物越来越难打于是开始思考是不是自己平时锻炼没到位,于是苦练一个月后发现......自己连一个史莱姆 ...

  5. docker容器连接

    前面我们实现了通过网络端口来访问运行在docker容器内的服务.下面我们来实现通过端口连接到一个docker容器 网络端口映射 我们创建了一个 python 应用的容器. runoob@runoob: ...

  6. Function.apply.bind()与Function.apply.bind()

    1.Function.apply.bind(…) 我在学习promise部分的时候遇到了这样的代码: Promise.resolve([10,20]).then(Function.apply.bind ...

  7. 蛋疼的springboot web项目使用jetty容器运行

    出现的问题: 今天自己新建了一个maven webapp项目,准备自己看看springboot的东西,搭好的项目是这样的 一切都很正常啊,用run App的方式直接启动 成功啦,本应该到此结束,喝茶吃 ...

  8. 什么是epistatic effects | 上位效应

    epistatic与interaction之间的区别与联系? genetic上的interaction是如何定义的? Epistasis is the phenomenon where the eff ...

  9. php 将office文件(word/excel/ppt)转化为pdf(windows和linux只要安装对应组件应该就行)

    一.配置环境 (1)配置php.ini 添加:extension=php_com_dotnet.dll com.allow_dcom = true  // 去掉号,改为true 重启环境 (2) 安装 ...

  10. 快速识别Hash加密方式hashid

    快速识别Hash加密方式hashid hashid工具是用来识别不同类型的散列加密,进而判断哈希算法的类型.该工具的而语法格式如下所示: hashid [option] INPUT 其中,option ...