首頁 > web前端 > js教程 > EasyUI閃屏EasyUI頁面載入提示(原理+程式碼+效果圖)_javascript技巧

EasyUI閃屏EasyUI頁面載入提示(原理+程式碼+效果圖)_javascript技巧

WBOY
發布: 2016-05-16 15:14:37
原創
1420 人瀏覽過

使用EasyUI時,有個常遇到的問題,頁面還沒渲染完成的時候,就展現了。

剛開始很混亂,等載入完成後,就好了。

$.parser.onComplete,這個是在所有元件解析完成後執行的事件。其實這個事件很有用的。很多在佈局用到easyui的時候總是會出現一個問題。就是在一進入主介面的時候,頁面的不是馬上就展現,而是會有一個混亂的過程,之後一閃就又好了。

其實這個就是因為easyui是在dom載入完畢之後才會對整個頁面進行解析,當你們佈局和組件使用的比較多的時候,完整的解析組件就需要一個過程,而在這個過程中就會出現短暫的界面混亂現象。

要解決這個問題其實只要好好利用這個onComplete 事件在結合一個載入遮罩就解決問題了。

把需要這個動畫效果的,放到一個頁面中去。

<#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> 
登入後複製

以上內容是小編給大家介紹的EasyUI閃屏EasyUI頁面載入提示,希望對大家以上幫助!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板