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