Question

My AJAX app is basically one index.html plus a bunch of .js modules. My setup function hooks up the js handler code to the appropriate DOM element. I suspect I need to use window.onload() rather than jquery’s $(document).ready() since all the .js files need to be available (i.e. downloaded) at hookup time.

My understanding is that only the DOM tree is ready at $(document).ready(), but there’s no guarantee that the .js files have been loaded. Is that correct?

PS. I don’t need multiple onload handlers; a single window.onload() is fine for me.

Answer 1

No, you can safely use $(document).ready() as long as your script tags are loaded synchronously (in most cases, this means “normally”). The browser waits for a <script> to be loaded before continuing. Therefore, $(document).ready() includes all <script> tags in the source.

There are two exceptions to this, if the script tags contains an async or defer attribute. The prior meaning the compatible browsers can continue rendering the page, and the latter signifying that the script is executed when the page has finished.