Need to trigger a function after page loads (it works in jquery but not pure javascript)

Question

The following issue bugs me big time. I need some input.

I have a wordpress plugin installed that loads a jquery script. I have my own pure javascript (not jquery) function that needs to run once the page is done loading (and it must run after the plugin's jquery script).

I used this to trigger my function after the page has finished loading (and it worked fine), but after I updated stuff in my theme, it just stopped working:

window.addEventListener('load', myFunction);

For testing purposes:

• I added an alert box to my function that must run once the page finished loading, in order to see when the function gets triggered. And the alterbox came up way before the page finished loading.
• I played around with the wordpress JS dependancies, and no luck.

As a last resort, I decided to try and trigger my pure Javascript function, using jquery (which is weird I know). I used the following, and all of the sudden it worked:

jQuery(document).ready(function($) {
    myFunction();
});

I feel a little weird to use Jquery to trigger a pure Javascript function. But this is the only way I could get things to work.

So my question is...

Why would this work:

jQuery(document).ready(function($) {
        myFunction();
    });

But, not this (even though my function is pure javascript):

window.addEventListener('load', myFunction);

Was I not using the correct EventListener, or what is the issue?

Answer 1

The pure JS equivalent for $(document).ready() is to set an event listener for DOMContentLoaded:

So that would be:

document.addEventListener("DOMContentLoaded", myFunction)