頁面數據加載完成時,顯示loading頁面.數據加載完,loading隱藏.

時間 2019-11-18

標籤頁面數據加載完成時顯示 loading 隱藏简体版

原文原文鏈接

一,引入三個文件javascript

jQuery版本使用 jQuery v1.7.1
jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 作數據加載時使用
jquery.blockui.min.js 放有loading.gif圖片及樣式html

<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部分java

①.<div id="GroPro">最外層div<div>
②.修改load未鋪滿全文的bug
獲取網頁正文全文高度：document.body.scrollHeightjquery

<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方法(最上方)ajax

// 頁面級刷新鎖持有（可用於防止頁面數據重複加載）
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();
});

③.帳期切換(切換按鈕時),至關於刷新數據ui

// 鎖定頁面
PageRefreshLockHolder.lockAll();

④.經過ajax請求數據時:(同一個頁面的數據在同一個ajax中請求完成)this

$.ajax( {
    success : function(data) {
        //最下方
        // 數據請求完,解鎖
        PageRefreshLockHolder.unlock("OneView");
    }
});

⑤.在刷新左右上下頁面後,解鎖spa

PageRefreshLockHolder.unlock("OneView");

⑥.
若是一個頁面的數據是在同一個ajax中請求的,只在一個ajax中解鎖頁面就能夠了.
若是頁面中各版塊數據在不一樣ajax中請求的,那麼須要在各個版塊的ajax中解鎖.code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。