EasyUI閃屏EasyUI頁面加載提示(原理+代碼+效果圖)
更新時間：2016年02月21日 13:57:25 作者：雷文
這篇文章主要介紹了EasyUI閃屏EasyUI頁面加載提示(原理+代碼+效果圖)的相關(guān)資料,需要的朋友可以參考下
使用EasyUI時，有個經(jīng)常遇到的問題，頁面還沒有渲染完成的時候，就展現(xiàn)了。
剛剛開始很混亂，等加載完成后，就好了。
$.parser.onComplete，這個是在所有組件解析完成后執(zhí)行的事件。其實這個事件很有用的。很多在布局用到easyui的時候總會出現(xiàn)一個問題。就是在一進入主界面的時候，頁面的并不是馬上就展現(xiàn)，而是會有一個混亂的過程，之后一閃就又好了。
其實這個就是因為easyui是在dom載入完畢之后才會對整個頁面進行解析，當(dāng)你們布局和組件使用的比較多的時候，完整的解析組件就需要一個過程，而在這個過程中就會出現(xiàn)短暫的界面混亂現(xiàn)象。
要解決這個問題其實只要好好利用這個onComplete 事件在結(jié)合一個載入遮罩就解決問題了。
把需要這個動畫效果的，放到一個頁面中去。
<#include "common/loadingDiv.html"/>（Freemarker的include語法，模版用的.html后綴）
loadingDiv.html
<div id='loadingDiv' style="position: absolute; z-index: 1000; top: 0px; left: 0px;
width: 100%; height: 100%; background: white; text-align: center;">
<h1 style="top: 48%; position: relative;">
<font color="#15428B">努力加載中···</font>
</h1>
t;/div>
<script type="text/javascript">
function closeLoading() {
$("#loadingDiv").fadeOut("normal", function () {
$(this).remove();
});
}
var no;
$.parser.onComplete = function () {
if (no) clearTimeout(no);
no = setTimeout(closeLoading, 1000);
}
</script>
以上內(nèi)容是小編給大家介紹的EasyUI閃屏EasyUI頁面加載提示，希望對大家以上幫助！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于js中join()方法的相關(guān)資料,join方法用于把數(shù)組中的所有元素放入一個字符串,文中通過代碼以及圖文介紹的非常詳細,需要的朋友可以參考下2023-10-10
在js中將中文用gb2312編碼。如，“我”編碼后應(yīng)該是“%CE%D2”。2009-12-12
這篇文章主要介紹了微信小程序iOS下拉白屏晃動問題解決方案,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
Bootstrap模態(tài)框水平垂直居中與增加拖拽功能
最近開發(fā)一個CMS系統(tǒng)使用上了Bootstrap，在開發(fā)一個添加某些選項時，打算彈出一個模態(tài)框，但是發(fā)現(xiàn)，模態(tài)框不會垂直居中到屏幕上，而是在屏幕上方,通過查閱資料才解決此問題，下面小編給大家分享解決思路2016-11-11
SOSO地圖JS畫出標(biāo)注和中心點以html形式運行
SOSO地圖想必大家都知道吧，本文將為大家詳細介紹下使用JS畫出標(biāo)注和中心點,直接貼出代碼，感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了json的結(jié)構(gòu)與遍歷方法,結(jié)合具體實例形式分析了json常見的簡單與復(fù)雜結(jié)構(gòu)表示方法,以及具體的遍歷操作實現(xiàn)技巧,需要的朋友可以參考下2017-04-04
JavaScript獲取當(dāng)前運行腳本文件所在目錄的方法
這篇文章主要介紹了JavaScript獲取當(dāng)前運行腳本文件所在目錄的方法,涉及JavaScript文件目錄操作的相關(guān)技巧,需要的朋友可以參考下2016-02-02
typescript使用 ?. ?? ??= 運算符的方法步驟
本文主要介紹了typescript使用 ?. ?? ??= 運算符的方法步驟,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
使用JS前端加密庫sm-crypto實現(xiàn)國密sm2、sm3和sm4加密與解密
這篇文章主要介紹了使用JS前端加密庫sm-crypto實現(xiàn)國密sm2、sm3和sm4加密與解密,需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細介紹了javascript實現(xiàn)拖拽碰撞檢測,碰撞改變顏色，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03