使用EasyUI時(shí),有個(gè)經(jīng)常遇到的問(wèn)題,頁(yè)面還沒(méi)有渲染完成的時(shí)候,就展現(xiàn)了。
剛剛開(kāi)始很混亂,等加載完成后,就好了。
$.parser.onComplete,這個(gè)是在所有組件解析完成后執(zhí)行的事件。其實(shí)這個(gè)事件很有用的。很多在布局用到easyui的時(shí)候總會(huì)出現(xiàn)一個(gè)問(wèn)題。就是在一進(jìn)入主界面的時(shí)候,頁(yè)面的并不是馬上就展現(xiàn),而是會(huì)有一個(gè)混亂的過(guò)程,之后一閃就又好了。
其實(shí)這個(gè)就是因?yàn)閑asyui是在dom載入完畢之后才會(huì)對(duì)整個(gè)頁(yè)面進(jìn)行解析,當(dāng)你們布局和組件使用的比較多的時(shí)候,完整的解析組件就需要一個(gè)過(guò)程,而在這個(gè)過(guò)程中就會(huì)出現(xiàn)短暫的界面混亂現(xiàn)象。
要解決這個(gè)問(wèn)題其實(shí)只要好好利用這個(gè)onComplete 事件在結(jié)合一個(gè)載入遮罩就解決問(wèn)題了。
把需要這個(gè)動(dòng)畫(huà)效果的,放到一個(gè)頁(yè)面中去。
<#include "common/loadingDiv.html"/>(Freemarker的include語(yǔ)法,模版用的.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頁(yè)面加載提示,希望對(duì)大家以上幫助!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注