JS window.onload why don't wait loaded

Question

Why it works without waiting for the page to be full loaded. Also, how can I run a function when the whole page is full loaded on Javascript?

Answer 1

It depends on your definition of "loaded".

The load event will fire...

[...]once a web page has completely loaded all content (including images, script files, CSS files, etc.). (Source)

This is the case here. All the images and script files and CSS files in the original HTML document have been loaded! However, the "loaded" state in case of Twitter is a state in which a script will later initiate the loading of new elements. That is outside the scope of the original page load.

If you want to wait for what you call "loaded", you'd have to ask yourself technically what point that is. I guess the answer would be something like "when element X is visible". In that case you can install a MutationObserver to listen on that element getting added/modified, after identifying what element you want to wait for by checking the DOM in your browser console. (The worse solution would be an interval that checks if that element exists yet.)

For Twitter, this works for me for example (watching for the first story to be loaded):

const observer = new MutationObserver(mutations => {
  if (mutations.some(mutation => {
    return Array.from(mutation.addedNodes).some(node => node.querySelector('article'))
  })) {
    setTimeout(() => { // Wait for all the updates of this frame to go through
      console.log('Page fully loaded!')
    }, 0)
    observer.disconnect()
  }
})

observer.observe(document, {
  attributes: false,
  childList: true,
  characterData: false,
  subtree: true
})

Answer 2

change your onload function syntax to any one of the following and try

window.addEventListener('load', (event) => {
 console.log('page is fully loaded');
});

with onload

window.onload = (event) => {
 console.log('page is fully loaded');
};