I want to load a javascript file at the end of jquery.ready so that the code in my ready handler doesn't have to wait to execute until this large javascript file is loaded.
My jquery.ready code doesn't rely on this javascript file at all.
Would this be a good way to do that?
$(function(){
...
...
$('head').append('<script type="text/javascript" src="/largejs.js"></script>');
});
Use .getScript: http://api.jquery.com/jQuery.getScript/
$(document).ready(function(){
...
...
$.getScript("largejs.js");
});
solution will check jquery already loaded, if not it will check after some time here 500ms and loop until it found jquery
function loadScriptAfterJQueryReady(jsFile) {
setTimeout(function () {
var loadScript=true;
if (typeof jQuery == 'undefined') {
if (typeof window.jQuery == 'undefined') {
/* jQuery is not loaded */
loadScript=false;
loadScriptAfterJQueryReady(jsFile);
}else{
/* jQuery is loaded */
}
} else {
/* jQuery is loaded */
}
if(true==loadScript) jQuery.getScript(jsFile);
}, 500);
}
loadScriptAfterJQueryReady("my.js");
The quoted "</script>" tag will actually end your block of JavaScript prematurely.
I'd use this method:
var newScript = $(document.createElement('script'));
newScript.src="/largejs.js"
If your application is new and not too far along yet, you could get a lot out of using LABjs for that purpose. It allows all your script files to load in parallel or, even, at any other time that you prefer (on demand). http://labjs.com/
