EasyUI加載完Html內(nèi)容樣式渲染完成后顯示
等待頁面的css樣式加載完畢,Html內(nèi)容加載完畢,樣式生成后再進行展示,避免一開始加載內(nèi)容后,逐漸渲染樣式造成的不良視覺效果,增強用戶體驗。
新增base-loading.js文件,代碼如下
//獲取瀏覽器頁面可見高度和寬度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //計算loading框距離頂部和左部的距離(loading框的寬度為215px,高度為61px) var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0, _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0; //加載gif地址 var Loadimagerul="/Content/LoadJs/Image/loading.gif"; //在頁面未加載完畢之前顯示的loading Html自定義內(nèi)容 var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#f3f8ff;opacity:1;filter:alpha(opacity=80);z-index:10000;"><div style="position: absolute; cursor1: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width:100px;; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; background: #fff url('+Loadimagerul+') no-repeat scroll 5px 12px; border: 2px solid #95B8E7; color: #696969; font-family:\'Microsoft YaHei\';">玩命加載中...</div></div>'; //呈現(xiàn)loading效果 document.write(_LoadingHtml); //監(jiān)聽加載狀態(tài)改變 document.onreadystatechange = completeLoading; //加載狀態(tài)為complete時移除loading效果 function completeLoading() { if (document.readyState == "complete") { var loadingMask = document.getElementById('loadingDiv'); loadingMask.parentNode.removeChild(loadingMask); } }
使用的時候,只需要在Head中引入就可以
@*//加載JS動畫效果*@
<script src="~/Content/LoadJs/base-loading.js"></script>
效果如下:引入后,加載Heml內(nèi)容和樣式的時候,會出現(xiàn)加載動畫,加載完畢后顯示出來,避免逐漸渲染出現(xiàn)的卡頓畫面。
渲染完成,一次性顯示渲染畫面.
以上所述是小編給大家介紹的EasyUI加載完Html內(nèi)容樣式渲染完成后顯示,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- easyUI使用分頁過濾器對數(shù)據(jù)進行分頁操作實例分析
- jQuery EasyUI API 中文文檔 - Pagination分頁
- jQuery EasyUI datagrid實現(xiàn)本地分頁的方法
- jQuery EasyUI Pagination實現(xiàn)分頁的常用方法
- EasyUi datagrid 實現(xiàn)表格分頁
- EasyUI Pagination 分頁的兩種做法小結(jié)
- SSh結(jié)合Easyui實現(xiàn)Datagrid的分頁顯示
- EasyUi+Spring Data 實現(xiàn)按條件分頁查詢的實例代碼
- EasyUI折疊表格層次顯示detailview詳解及實例
- jQuery Easyui學(xué)習(xí)教程之實現(xiàn)datagrid在沒有數(shù)據(jù)時顯示相關(guān)提示內(nèi)容
- easyUI 實現(xiàn)的后臺分頁與前臺顯示功能示例
相關(guān)文章
基于jQuery實現(xiàn)點擊最后一行實現(xiàn)行自增效果的表格
現(xiàn)在任何事務(wù)都追求效率和人性化,當(dāng)然網(wǎng)頁效果也是如此,如果一個可以編輯數(shù)據(jù)的表格,編輯到最后一行的時候,點擊可以自動添加一行,這樣算是一個比較人性化的效果,可以免去一絲勞頓之苦,下面分享一段這樣的代碼2016-01-01jquery自動將form表單封裝成json的具體實現(xiàn)
這篇文章主要介紹了jquery自動將form表單封裝成json的具體實現(xiàn),需要的朋友可以參考下2014-03-03hover的用法及l(fā)ive的用法介紹(鼠標(biāo)懸停效果)
hover屬性在書寫css時大家都不會陌生了吧live主要用于對動態(tài)加載出來的元素綁定事件,下來將為大家詳細(xì)介紹下兩者的使用,感興趣的朋友可不要錯過了哈2013-03-03jQuery學(xué)習(xí)筆記之創(chuàng)建DOM元素
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之創(chuàng)建DOM元素的相關(guān)資料,需要的朋友可以參考下2015-01-01