페이지의 CSS 스타일이로드 될 때까지 기다렸다가 HTML 컨텐츠가로드 된 다음 스타일이 생성 된 후에 표시하여 컨텐츠가 처음에로드 된 후 점차 스타일을 렌더링하고 사용자 경험을 향상 시켜서 발생하는 불리한 시각적 효과를 피하십시오.
Base-Loading.js 파일을 추가하면 코드는 다음과 같습니다
// 브라우저 페이지의 가시 높이와 너비를 가져옵니다 var _pageHeight = document.documentElement.clientHeight, _pageWidth = document.documentElement.clientWidth; // 상단과 왼쪽의 로딩 상자 사이의 거리를 계산합니다 (하중 상자의 폭은 215px입니다. ? (_pageheight -61) / 2 : 0, _loadingleft = _pagewidth> 215? (_pageWidth -215)/2 : 0; // GIF 주소로드 var rodimagerul = "/content/loadjs/image/loading.gif"; // 페이지가로드되기 전에 표시된 사용자 정의 컨텐츠 var _loadinghtml = '<div id = "loadingDiv"Style = "위치 : 0; width : 100%; 'px; 배경 :#f3f8ff : 1; alpha : z-index : "<div style =" 왼쪽으로 : 5px; document.write (_loadinghtml); // 문서를 변경하기 위해 로딩 상태를 말하면 readreadyStateChange = 완료로드; //로드 상태가 완료되면로드 효과 제거 () {if (document.readyState = "{var loadingMask = document.getElementById ( 'loadingDiv'); LoadingMask.parentNode.removeChild (LoadingMask);}}그것을 사용할 때는 머리에만 소개하면됩니다.
@*// JS 애니메이션 효과로드*@
<script src = "~/content/loadjs/base-loading.js"> </script>
그 효과는 다음과 같습니다. 소개 후, HEML 컨텐츠 및 스타일을로드 할 때 로딩 애니메이션이 나타나며, 이는 스터 터는 화면을 점차적으로 렌더링하지 않도록로드 후 표시됩니다.
렌더링이 완료되고 렌더링 화면이 한 번에 표시됩니다.
위는 편집자가 당신에게 소개 한 것입니다. EasyUI가로드 된 후 HTML 컨텐츠의 컨텐츠 스타일 렌더링이 표시됩니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!