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 ?

Or maybe a fix that javascript be ignored until my methodes are executed — TJR
– TJR, Commented Apr 26, 2012 at 9:23
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. — Šime Vidas
– Šime Vidas, Commented May 4, 2012 at 11:53

fka · Accepted Answer · 2012-05-04 11:50:16Z

3

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);
};

answered May 4, 2012 at 11:50

fka

4203 silver badges4 bronze badges

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

Comments

freakish · Accepted Answer · 2012-04-26 09:49:08Z

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.

GGG · Accepted Answer · 2012-04-28 23:28:46Z

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);
}

reach4thelasers · Accepted Answer · 2012-04-26 09:23:17Z

0

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

answered Apr 26, 2012 at 9:23

reach4thelasers

27k24 gold badges95 silver badges127 bronze badges

1 Comment

TJR Over a year ago

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.

Denis Ermolin · Accepted Answer · 2012-04-26 09:24:57Z

0

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.

answered Apr 26, 2012 at 9:24

Denis Ermolin

5,5746 gold badges29 silver badges45 bronze badges

Collectives™ on Stack Overflow

execute javascript before dom is loading

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related