Print Page - to all elements/components of EasyUI -> how to hide, till all is render ... ?

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

??

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 (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
...

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: paule32 on January 15, 2022, 04:21:57 AM