How to check if page has FULLY loaded(scripts and all)?

Question

I know, there are lots of answered questions about it here. My situation is a bit different, though, and I couldn't find an answer yet.

I'm trying to show a message after the page has fully loaded. Using $(document).ready, document.readyStateChange, I don't care.

The thing is that the document gets ready right in the middle of a script that needs to be executed. I've tried to do it with window.onload (and it's jQuery equivalent), but it shows me the message before some images/elements show up. Is there a way to wait for it to be executed and only then show up the message? (Please keep in mind that I might need to do it several times in the same page).

Thanks in advance!

Sankaran

Answer 1

Sound like you need to make your code run as a callback to whatever script must execute first, rather than binding it to the document.ready event. If you can post some code, I might be able to help more.

Bittencourt

Answer 2

bianca, why not try to load the message from the script that needs to be run? Trigger the message at the end of the script so you know that the script you need to run completes.

Angeloangelology

Answer 3

Javascript executes in the order it is written. I would guess your current code runs after the HTML is loaded (ie. window.onload) if so just have your message be the last thing that is called in your Javascript.

The only exceptions to this is if your doing asynchronously XMLHttpRequest calls then you will want to have have a variable that is set to "false" and when that XMLHttpRequest finishes its sets that variable to "true". Then you can just use setTimeout you listen for when that variable is true.

Fenugreek

Answer 4

window.onload is the solution. window.onload is triggered, when the DOM is ready, and when all of the resources are also loaded into the browser. In other words, it fires when browser's circle stops rotating.

Corrinecorrinne

Answer 5

Making sure a page has truly finished loading isn't always an easy job. especially for pages which rely on content via Ajax, and other assets which load asynchronously (each asset can be loaded independent and in parallel to other assets, like images for example).

My suggestion to approaching such situations:

Create some global Deferred object (a promise) and make sure it will be resolved only after everything that it is depended on is "ready".

Minimal example:

// start your web app code..
var p1 = new Promise();
var p2 = new Promise();
var p3 = new Promise();

// when all dependencies are done loading, means the page is truly "ready"
Promise.all([p1, p2, p3])
  .then(() => { 
       // page done loading
  });

// somewhere in the code...wait for Ajax content to load
// and resolve "p1" after the content has loaded
p1.resolve();

// somewhere in the code...wait for some other Ajax content to load
// and resolve "p2" after the content has loaded
p2.resolve();

// somewhere in the code...wait for all the images to load 
// (https://mcmap.net/q/64871/-check-if-an-image-is-loaded-no-errors-with-jquery)
// and resolve "p3"
p3.resolve();

The point is that you manually need to make sure all the different parts that are async have been fully loaded. it's a tedious work but it's a very solid solution.

Tyishatyke