Notice if everything is loaded

Webix JS
1

Hi all.

my question is: Is there a way method or webix.object where I can give a notice that everything on the browser page has been complete loaded? I don’t mean the DOM! Cause some processes loading from server and it takes time!

I can use this:

window.onload = function() { console.log('Loaded'); };

or this:

document.addEventListener('DOMContentLoaded', ()=> {
    console.log('Loaded');
});

or this:

document.addEventListener("readystatechange", (event) => {
  if (event.target.readyState === "interactive") {
    initLoader();
  } else if (event.target.readyState === "complete") {
    initApp();
  }
});

But it’s all to early! Is there a programming procedures to achieve this?

There are running several processes like ajax, loading images, and loading extern editor etc. and some processes are loading earlier some later. I want to enable some buttons and tabs after all is set at the right place…

Maybe somebody got similar problems… ?!

Michael

2

Hi @Michael

If i goth the use-case right, the described processes may use different handlers:

  • predefined scripts, stylesheets and images can be tracked with load event,
  • for custom requests: native XMLHttpRequest has onreadystatechange, while third-party solutions can rely on promises or callbacks,
  • dynamically added images can be watched with individual onload,
  • an external editor is more likely to dynamically insert a script on a page and/or provide a promise.
  • Webix data widgets have their own handlers (onAfterLoad event, waitData promise)

Moreover, JS code inside Webix manipulates with HTML elements inside widgets during rendering (creates, appends, etc.).
So if you have a template with an image, it is also added dynamically and global onload won’t handle it.

So in general, with all this different cases you may need to

  • mark by hand everything that has to be watched (perhaps associate each item with an ID)
  • gather loading items and wait for the moment they are ready

Creating/resolving custom promises for all instances of loading may be too complex, but another option I can think of is using an array as a “storage” populated with marks for elements that are currently loading.
Eventually, with no currently penging requests, an empty array can be considered as a sign that everything is “ready”. This will work if you can add all marks initially: Code Snippet

This definitely can be amplified to a more complex solution, but the snippet illustrates the basic idea.