Question

if (typeof $ == "undefined"){

console.log("$ is undefined. Adding javascript element to the document");
jQs = document.createElement("script");
jQs.type = 'text/javascript';
jQs.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
var s = document.getElementsByTagName('script')[0]; 
s.parentNode.insertBefore(jQs, s);

// Run script once jQuery is loaded
    console.log(" startScript() Start");
    jQs.onload = startScript;

}

I have got the script above, which adds a script tag that points to jquery in the case if the $ is undefined. I try to insert the tag before the document begins and execute the startScript function. But what I think happens is that the body.onload doesnt trigger the startScript fast enough.. and that prevents its execution. Is there an event that would trigger teh startScript as soon as the jquery script tag / document is ready?

I think the answer lies in executing the startscript whenever the jquery tag is ready and the document is ready together..but i dont know how to achieve the effect..

Note that putting the code in $(document).ready() is an irrelevant solution because it would $ is undefined if there is no jquery file included in the script

note also that i dont want to execute the onload function on the jquery tag onload event,, cause it may mean that the function is being triggered several times

Answer 1

  function init() {
    if (typeof $ == "undefined"){

    console.log("$ is undefined. Adding javascript element to the document");
    jQs = document.createElement("script");
    jQs.type = 'text/javascript';
    jQs.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(jQs, s);

    // Run script once jQuery is loaded
        console.log(" startScript() Start");
        jQs.onload = startScript;

    }
}
window.onload = init;