一,引入三个文件

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. warning insecure world writable dir ruby mode 040777，gem insstal sass error failed to build gem native extension

    //1.删除原gem源 gem sources --remove https://rubygems.org/ //2.添加国内镜像 gem source -a https://gems.ruby-ch ...

  2. jmeter五种提取器 之 正则表达式

    提取器的作用是把响应结果值获取到,用于后续的请求参数中 () :封装了待返回的匹配字符串. .  :匹配任何单个字符串. + :一次或多次. ? :不要太贪婪,在找到第一个匹配项后停止. *  :匹配 ...

  3. Pytest权威教程08-使用tmp目录和文件

    目录 使用tmp目录和文件 tmp_path Fixture方法 tmp_path_factory Fixture方法 tmpdir Fixture方法 tmpdir_factory Fixture方 ...

  4. C语言的柔性数组的实现及应用

    c编程的时候数组长度一般都是固定好的,实际上c还能实现变长数组.其实c99中确实是有变长数组的说法,C99中通过允许结构体中的最后一个成员是长度未知的数组实现变长数组,其定义格式如下: typedef ...

  5. tecplot-计算合速度的一种方法

    原视频下载地址: http://yunpan.cn/cudFwWr8tFsxV  访问密码 75a8

  6. weblogic介绍

    快速阅读 介绍weblogic中间件,以及自身架构和几个基本概念,如何下载,安装等后面再详细介绍 . 什么是weblogic WebLogic最早由 WebLogic Inc. 开发,后并入BEA 公 ...

  7. linux内核的0号进程是在哪里创建的?

    1. 0号进程即为idle进程或swapper进程,也就是空闲进程 2. 0号进程特点 idle是一个进程,其pid为0. 主处理器上的idle由原始进程(pid=0)演变而来.从处理器上的idle由 ...

  8. IDEA优化配置，提高启动和运行速度

    IDEA优化配置,提高启动和运行速度   参考链接:https://blog.csdn.net/riju4713/article/details/83217013,http://www.pc0359. ...

  9. RestSharp - Ignore SSL errors

    项目启动时,添加下面代码: 项目启动时,添加 public App() { ServicePointManager.ServerCertificateValidationCallback += (se ...

  10. 转 mysql 文件系统空间满了

    #######################sample [OIP - 互联网开放平台]在2019-07-28 21:30:11发生10.194.42.19 - - Linux上的监控项[磁盘空间] ...