Easyui splash screen, Easyui page loading tips: Principle + code + renderings

When using Easyui, there is a frequently encountered problem, the page has not been finished rendering, the time to show.

It's just starting to get messy, and when the load is done, it's fine.

Refer to this article http://blog.csdn.net/zheng0518/article/details/12287801 has done.

$.parser.oncomplete, this is the event that is executed after all component parsing is complete. In fact, this event is very useful. A lot of problems always arise when layouts are used in Easyui. is when the main interface, the page is not immediately displayed, but there will be a chaotic process, then a flash is good.

In fact, this is because Easyui is in the DOM loaded after the entire page will be parsed, when you layout and component use more time, the complete parsing components need a process, and in this process will be a short-term interface chaos.

to solve this problem, just take advantage of it. OnComplete The event solves the problem by combining a load mask.

Put the animation effect to a page.

< #include "common/loadingdiv.html"/> (Freemarker's include syntax, template with the. html suffix)

Loadingdiv.html

  <div id= ' loadingdiv ' style= "position:absolute; z-index:1000; top:0px; left:0px;      width:100%; height:100%; Background:white; Text-align:center; " >      


<script type= "Text/javascript" >      function closeloading () {          $ ("#loadingDiv"). FadeOut ("normal", function () {              $ (this). Remove ();          });        var no;      $.parser.oncomplete = function () {          if (no) cleartimeout (no);          No = SetTimeout (closeloading, +);      }          </script>  

Easyui splash screen, Easyui page load hint: Principle + code +