Javascript - DOM ready after loading external javascript?

Question

Is the DOM always ready when my external scripts have finished loading?

<head>
    <script type="text/javascript" src="base.js"></script>
</head>

Inside base.js, I have an object that loads external scripts. It uses the following method to do so:

var head = document.getElementsByTagName("head")[0],
    scriptElement = document.createElement("script");

scriptElement.type = "text/javascript";
scriptElement.onreadystatechange = function () {
    if (this.readyState === "complete") onModuleLoaded();
};
scriptElement.onload = onModuleLoaded;
scriptElement.src = "externalScript.js";
head.appendChild(scriptElement);

Now, when all external scripts have been loaded, a callback function is called. My question is: Is this callback function suitable to place the rest of my javascript code in? This code needs the DOM to be ready.

My scripts also use jQuery. But I don't think I can use

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

because in my tests that fires before my scripts have been loaded. However, I do not know if this will always be the case. If it will, my callback function is suitable for my DOM-manupilating javascript code.

But if it is possible that my scripts can be loaded before the DOM is ready to be manipulated, I need to find another way.

Thank you for reading!

Always include your as well as external js files at the end of the html file .ie before the closing body tag and include user script file at the last. — kailash yogeshwar
– kailash yogeshwar, Commented Oct 28, 2015 at 12:27
If you're using jQuery, why not use $.getScript rather than doing your own browser-inconsistency workarounds (onreadystatechange vs. onload)? Also, IIRC, there are browsers that fire both, so you could get two calls to onModuleLoaded; if you don't switch to getScript, you might want a flag (if you don't already have one). — T.J. Crowder
– T.J. Crowder, Commented Oct 28, 2015 at 12:29
I did not know about the $.getScript method,I am very new to jQuery. Although maybe I should have searched better for a jQuery solution. I will next time. — MPS
– MPS, Commented Oct 28, 2015 at 12:44

Deepak Biswal · Accepted Answer · 2015-10-28 12:30:32Z

2

Check jQuery.holdReady(). If you will try to load external js via getScript then you can easily do that.

Delay the ready event until a custom plugin has loaded:

$.holdReady( true );
$.getScript( "externalScript.js", function() {
  $.holdReady( false );
});

answered Oct 28, 2015 at 12:30

Deepak Biswal

4,3302 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MPS Over a year ago

Thanks a lot! Just what I was looking for. I am just starting out with JQuery and did not know the feature.

Deepak Biswal Over a year ago

Great. Happy to know :)

T.J. Crowder Over a year ago

holdReady is a great way to address this, nice one. Doesn't really answer the question asked ("Is the DOM always ready when my external scripts have finished loading?"), but...

Community · Accepted Answer · 2017-05-23 11:51:57Z

1

Is the DOM always ready when my external scripts have finished loading?

~~Probably, yes.~~ No.

Dynamically-added script elements load their scripts asynchronously. You're quite correct that you can't use jQuery's ready callback because it looks at when the DOM defined by the main HTML is fully loaded, which may well be before your additional scripts have loaded.

~~I'd be really, really surprised if the main DOM weren't loaded before your onModuleLoaded callback was called. So probably, yes, it'll be ready.~~ Color me surprised. I ran the experiment, and guess what? It's possible for the script load and callback to happen before the rest of the page has been processed. (This is why I test my assumptions.)

~~But if you're worried there may be edge cases around it,~~ you could always use ready within your callback. If jQuery has already fired the ready callbacks and you hook another one, jQuery calls it right away.

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Oct 28, 2015 at 12:26

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

2 Comments

MPS Over a year ago

Thank you! That is well explained. That is a good thing to know that jQuery still calls the callback, even after the event has been fired. I think the $.holdReady(true) is very descriptive though.

T.J. Crowder Over a year ago

@MPS: Agreed, holdReady is a good way to address your problem.

Collectives™ on Stack Overflow

Javascript - DOM ready after loading external javascript?

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related