一,引入三个文件

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. docker安装postgresql

    1.在linux执行以下代码: docker run -p : -v /home/docker/postgresql/data:/var/lib/postgresql/data -e POSTGRES ...

  2. StarUML自动生成Java代码

    下载一个starUML 链接:https://pan.baidu.com/s/1pIGNVmhtwBxMrCG9LHdkCQ 提取码:c4i6 复制这段内容后打开百度网盘手机App,操作更方便哦 添加 ...

  3. 分享7个shell脚本实例--shell脚本练习必备

    概述 看多shell脚本实例自然就会有shell脚本的编写思路了,所以我一般比较推荐看脚本实例来练习shell脚本.下面分享几个shell脚本实例. 1.监测Nginx访问日志502情况,并做相应动作 ...

  4. Flink（一） —— 启动与基本使用

    一.Flink概念 lambda架构 将离线计算和实时计算结合在一起,发挥离线计算准确率高.实时计算响应速度快的优势.缺点是,同一套逻辑要分别在两个模式下实现,存在代码冗余的问题. Flink特点 ( ...

  5. 深入理解JVM虚拟机13：再谈四种引用及GC实践

    Java中的四种引用类型 一.背景 Java的内存回收不需要程序员负责,JVM会在必要时启动Java GC完成垃圾回收.Java以便我们控制对象的生存周期,提供给了我们四种引用方式,引用强度从强到弱分 ...

  6. 高可用Redis：Redis Cluster

    转(https://www.cnblogs.com/renpingsheng/p/9862485.html) Redis Cluster是Redis官方提供的Redis集群功能 1.为什么要实现Red ...

  7. T-MAX组--项目冲刺（第三天）

    THE THIRD DAY 项目相关 作业相关 具体描述 所属班级 2019秋福大软件工程实践Z班 作业要求 团队作业第五次-项目冲刺 作业正文 T-MAX组--项目冲刺(第三天) 团队名称 T-MA ...

  8. JS实现文字向上无缝滚动轮播

    效果图: 全部代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  9. [JDBC/Oracle]设置Statement.setQueryTimeout(seconds)并不好用 原因：环境问题

    对比实验:https://www.cnblogs.com/xiandedanteng/p/11960320.html 注:setQueryTimeout语句还是好用的,但有些环境不支持,下文是在单位虚 ...

  10. Win10下轻松安装centos7.0（推荐）

    Windows10下安装centos7.0虚拟机环境 Windows10自带了一个类似Vmware虚拟化产品Hyper-V管理器 如果没有找到这个的小伙伴可以从菜单中的windows管理工具找到如图: ...