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!
2 Answers 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 );
});
3 Comments
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...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 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.)onModuleLoaded callback was called. So probably, yes, it'll be ready. (削除ここまで)
(削除) 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.
2 Comments
holdReady is a good way to address your problem.
$.getScriptrather than doing your own browser-inconsistency workarounds (onreadystatechangevs.onload)? Also, IIRC, there are browsers that fire both, so you could get two calls toonModuleLoaded; if you don't switch togetScript, you might want a flag (if you don't already have one).