Best way to signal my JS script is loaded

Question

I have a JS script that will be hosted on my server and that others will embed in their html, i.e.

...<code for http://yoursite.com />
<script type="text/javascript" src="http://mysite.com/awesome.js" />
...<code for http://yoursite.com />

My script surfaces an object with a bunch of properties accessible for use as a javascript Object(), i.e.

<script type="text/javascript">
//From http://mysite.com/awesome.js
alert(Awesome.Name);
</script>

Due to the load time variance, it seems I need to signal that the "Awesome" object in my script is ready. I need this to stand on its own, so no dependencies on specific JS frameworks.

Do I need to publish my own custom JS event, or does the simple fact that my script is loaded get captured by one of the existing page-level events? How else should I be doing this?

UPDATE: as a point of reference, if I include the JS in an HTML page running from "http://mysite.com", the Awesome object is available and populated. When the JS file is included from another domain, the object is undefined at runtime.

Answer 1

If your script needs the DOM to be loaded before your object is instantiated, you should look at some frameworks and see how they handle this, then implement it in your code. If you don't need the DOM to be loaded, then I would let the user worry about the timing of using your object based on when it is loaded. Generally, your object should be available to be be used as soon as your script has been loaded, which means that the object ought to be available right after the script tag that includes it.

Answer 2

A). You realise that script requests are blocking? Are you ok with this or do you want to work around that, because the answer to your question depends on it.

B). Bare bones bulletproof and simple mechanism is to call a specified method which you can guarantee exists on the page. Let that methods implementation be up to the user to do what it will. Lots of other ways exist but we'd need to know what exactly the lifecycle and intent of your code is to recommend anything.

Answer 3

The javascript content of <script> tags is executed procedurally, so this

<script type="text/javascript" src="http://mysite.com/awesome.js" />
<script type="text/javascript">
    alert(Awesome.Name);
</script>

will only alert the contents of Awesome.Name if found in any previous script tag.

To understand if everything has been fully loaded on the page, you have to use the DOMContentLoaded, for firefox, and "onreadystatechange" for ie. Also you can simply check the load event on the window object if you don't care about checking the DOM (could be easier).

if ( document.addEventListener ) {
    document.addEventListener( "DOMContentLoaded", function(){
         doSomething();   
    }, false );
} else if ( document.attachEvent ) { // IE        
    document.attachEvent("onreadystatechange", function(){
        if ( document.readyState === "complete" ) {
            doSomething();
        }
    });
}

Answer 4

Anything accessible in the global scope can be accessed through the window scope. Hence, you could use this:

if (window["Awesome"] != null) { /* do something */ }