execute javascript before dom is loading

Question

I want to develop a handle javascript class that handle used frameworks, among other things.

For example:

myClass.addFramework('jQuery'); // just an example

It works fine and my class add the framework - but if there any jQuery code in it, it wouldn't work, because the framework is loaded after the dom is ready, so a default jQuery snippet like jQuery(document).ready(function(){}); can't work, because 'jQuery' isn't already defined.

Is there any solution to that I can script a 'fix' that before the rest of the dom is beginning to loading all my addFramework methods must be executed ?

• TJR: Or maybe a fix that javascript be ignored until my methodes are executed
• Šime Vidas: If your code uses jQuery, all you have to do is ensure that jQuery is loaded before your code. (Load jQuery in an earlier SCRIPT element.) That has nothing to do with the DOM-ready event btw.

Answer 1

You should use the onload event while creating script tag. You can use like this:

myClass.addFramework('jQuery', function () {
 // do stuff after jquery loaded.
});

You can implement it like that:

myClass.addFramework = function (name, onload) {
 var _script = document.createElement('script');
 _script.onload = function () {
 onload();
 }
 _script.onreadystatechange = function () {
 if (this.readyState == 'complete') onload();
 }
 _script.src = myClass.FRAMEWORK_BASE + '/' + name + '.js';
 document.getElementsByTagName('head')[0].appendChild(_script);
};

Answer 2

How about using custom Events? Something like this:

var CustomEvent = function() {
 this.eventName = arguments[0];
 var eventAction = null;
 this.subscribe = function(fn) {
 eventAction = fn; // you can customize this to hold array of handlers
 }; 
 this.fire = function(sender, eventArgs) {
 if (eventAction != null) {
 eventAction(sender, eventArgs);
 } else {
 alert('No ' + mEventName + ' handler!');
 }
 };
};

Now you can define something like this:

var myEvent = new CustomEvent("Framework Loaded");
myEvent.subscribe(function(sender, eventArgs) {
 alert('Framework loaded! Hurray!');
 // jQuery goes here
});

and after loading framework for example jQuery you just do this:

myEvent.fire(null, { framework: 'jQuery' });

(you should put the code probably somewhere in XHR handler).

Also if you make it fire after DOM loaded then you can forget about jQuery's $(document).ready(...) wrapper.

Answer 3

It looks like your class has a jQuery dependancy, ideally you should not have that dependancy.

Nonetheless if you are looking for an easy way to load jQuery dynamically, maybe this would help:

function onReady(){
 // My Custom Ready state. lets go wild here.
}
if (typeof jQuery === undefined || jQuery.fn.jquery !== '1.7.2') {
 var jScript = document.createElement('script');
 jScript.setAttribute("type", "text/javascript");
 jScript.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js")
 //Run onReady() once jQuery and document have loaded
 jScript.onload = function () { //Add on load Event delegate
 //JQuery is Loaded!! so you can do whatever you want with it to deligate.
 $(document).ready(onReady)
 }; 
 jScript.onreadystatechange = function () { //Same thing but for IE
 if (this.readyState == 'complete' || this.readyState == 'loaded')(function () {
 //JQuery is Loaded!! so you can do whatever you want with it to deligate.
 $(document).ready(onReady)
 });
 } 
 // Append Script to the Head
 document.getElementsByTagName("head")[0].appendChild(script_tag);
} else {
 // JQuery Exists so lets just use it
 $(document).ready(onReady);
}

Answer 4

The JQuery document.ready function basically does this:

window.onload = function ()
{
Javascript code goes here
}

Which has no dependencies on external libraries and will run your Javascript when the document has loaded.

You might also want to look at require.js

• TJR: I know - but i want to realize that i can use my js class in any project. Just one file, that handle all frameworks and other stuff - but except this i want to code my jQuery in the default way - but in this way i must realize that the hole javascript will be ignored until my class had finished the libaries.

Answer 5

You can use this small library to execute script after loading: Yepnope javascript loader

Also you can download scripts via ajax call. And in success callback append it to the document and execute script's code. But this approach already used in Yepnope library.