EasyUI 스플래시 화면 EasyUI 페이지 로딩 팁(원리 + 코드 + 렌더링)_javascript 기술

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 페이지 로딩 꿀팁입니다.