EasyUI splash screen EasyUI page loading tips (principle + code + renderings)_javascript skills

When using EasyUI, there is a problem that is often encountered, which occurs before the page is rendered.

It was confusing at first, but it will be fine after the loading is completed.

$.parser.onComplete, this is an event executed after all components are parsed. In fact, this event is very useful. There is always a problem when easyui is used in layout. When you enter the main interface, the page does not appear immediately, but there is a chaotic process, and then it flashes and is restored.

Actually, this is because easyui will parse the entire page after the dom is loaded. When you use a lot of layouts and components, it will take a process to completely parse the components, and in this process There will be a brief interface confusion.

To solve this problem, you only need to make good use of the onComplete event and combine it with a loading mask.

Put what needs this animation effect into a page.

<#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> 

The above content is the EasyUI splash screen EasyUI page loading tips introduced by the editor. I hope it will be helpful to you!