一,引入三个文件

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. 一步一步跟我学ImGui.第一讲.配置OpenGl2+ImGui环境

    目录 搭建ImGui例子中的第一个OpenGl2环境 一丶搭建OpenGL2环境 1.下载GLFW库 2.解压GLFW库. 3.将GLFW库拷贝到你的工程文件下. 4.配置到Vs2013中. 5.测试 ...

  2. LeetCode之找零钱

    题目:已知不同面值的钞票,求如 何用最少数量的钞票组成某个金额,求可 以使用的最少钞票数量.如果任意数量的已知面值钞票都无法组成该金额, 则返回-1. 示例: Input: coins = [1, 2 ...

  3. Shell编程——脚本编写思路与过程

    Linux系统Shell编程——脚本编写思路与过程 “ 前段时间有小伙伴问我一些问题,涉及到shell脚本的编写问题,事后,我深入思考了下,实际生产环境的确也会经常用到,因此如何写这个脚本?它的思路在 ...

  4. kubernetes（K8S）集群及Dashboard安装配置

    环境准备 机器信息 主机名 操作系统 IP地址 K8sm-218 Centos 7.5-x86_64 172.17.0.218 k8s-219 Centos 7.5-x86_64 172.17.0.2 ...

  5. jQuery学习笔记——事件

    何为事件 就是你的鼠标,键盘等对网页元素进行的操作. 常见事件 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown c ...

  6. 请在mysql配置文件修sql-mode或sql_mode为NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION

    错误信息:请在mysql配置文件修sql-mode或sql_mode为NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION 解决办法(最有效,以MySQL5.7为例): ...

  7. Spring boot 去除URL 里的 JSESSIONID

    方法一 application.yml 里设置 server: port: 80 servlet: session: tracking-modes: cookie cookie: http-only: ...

  8. nodejs五子棋online游戏开发视频教程，客户端cocos creator js

    开发的游戏是五子棋online,网络版的,服务端部分和客户端部分都在这个教程里面,可以看一下目录! 服务器nodejs游戏开发教程 使用Nodejs开发网络服务器 游戏服务端 ,cocos creat ...

  9. PHP课程环境安装总结文档

    phpStudy的安装 1.找一个硬盘根目录,比如这里我使用E盘,在E盘根目录创建一个php的文件夹,进入php文件夹,如下图所示 2.在步骤1的php文件夹下再建立一个文件夹php_dev,如下图所 ...

  10. bat实现每天定时执行命令[windows底下每天重启一下Nginx]

    --试验通过--Windows环境脚本名称:restart.bat脚本内容: @echo offtaskkill /f /fi "IMAGENAME eq nginx.exe"cd ...