EasyUI Forum
March 29, 2024, 02:06:22 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: to all elements/components of EasyUI -> how to hide, till all is render ... ?  (Read 2036 times)
paule32
Newbie
*
Posts: 12


View Profile Email
« on: January 15, 2022, 04:21:57 AM »

Hello,

My WebPage goes very big Project.
And therefore, the loading times goes to open sky limit.
This means, that I can see, what Elements/Objects are
loading at init. time.

I have implement a pre-loader screen.
But this screen will be disappear while the jquery function
$(document).ready( ...
is done.
This means, that the pre-lloader at end of this function is
hide to fast, and I can see the rendering of easyui.

I have tried to create a super-parent html "div", with the
style attribute "display:none;", and "visibility:hidden;".
But all this has no Effect.

So, the Question is: give it a Property or Function, that
can be used, after all is rendered on page.
When this is done/true, hide the ore-loader "div", and
display the content...

??
Logged
paule32
Newbie
*
Posts: 12


View Profile Email
« Reply #1 on: January 15, 2022, 05:07:51 AM »

Hello,

I solved this own Question by learning, and doing by paste & use
based on SO:
https://stackoverflow.com/questions/8611713/running-javascript-after-page-is-fully-rendered

It works for me, as I had insert a second timeout.
The first timeout looks, if all functions and stuff is loaded.
The second timeout make sure, if the GUI stuff is rendered (for my Computer, 500 mmseconds are enough
and I think it is working fine).

Here comes the extended adapted code (form SO, and me):

Code:
<body>
...
<div preloader ...
/div>
<div easyui-window ...
...
/div>
...
<script language="JavaScript" type="text/javascript">
function highlighterAction() {
// do load page stuff here
}
function highlighter() {
    /*
      The short pause allows any required callback functions
      to execute before actually highlighting, and allows
      the JQuery $(document).ready wrapper to finish.
     */
    setTimeout(function() {
        highlighterAction();
    }, 200);
}
if (document.readyState == 'complete') {
    highlighter();

        // this timeout, i have add
setTimeout(function() {
$("#preloader").hide();
$("#win").window({closed:false});
}, 500);
} else {
    document.onreadystatechange = function () {
        if (document.readyState === "complete") {

            highlighter();
                // this timeout, I have add
setTimeout(function() {
$("#preloader").hide();
$("#win").window({closed:false});
}, 500);
        }
    }
}
</script>
</body>
</html>

HTHO - Hope This Helps Others
...
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!