Say you were going to do an include on a whole bunch of pages, and inside of that include you wanted to do some jQuery specific stuff. That page may or may not already have jQuery loaded. If it already does, you don’t want to load it again, but if not, you do. This works for that.
Smart Asynchronous Way
// Only do anything if jQuery isn't defined
if (typeof jQuery == 'undefined') {
if (typeof $ == 'function') {
// warning, global var
thisPageUsingOtherJSLibrary = true;
}
function getScript(url, success) {
var script = document.createElement('script');
script.src = url;
var head = document.getElementsByTagName('head')[0],
done = false;
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function() {
if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
done = true;
// callback function provided as param
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
};
};
head.appendChild(script);
};
getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', function() {
if (typeof jQuery=='undefined') {
// Super failsafe - still somehow failed...
} else {
// jQuery loaded! Make sure to use .noConflict just in case
fancyCode();
if (thisPageUsingOtherJSLibrary) {
// Run your jQuery Code
} else {
// Use .noConflict(), then run your jQuery Code
}
}
});
} else { // jQuery was already loaded
// Run your jQuery Code
};
Notice how there is multiple places the jQuery code you intend to run get’s called. Don’t repeat yourself there, put it in a function you can call to kick things off.
This code was adapted from here.
Document.write way
Hip kids don’t use document.write, but if you are too old to care:
var jQueryScriptOutputted = false;
function initJQuery() {
//if the jQuery object isn't available
if (typeof(jQuery) == 'undefined') {
if (! jQueryScriptOutputted) {
//only output the script once..
jQueryScriptOutputted = true;
//output the script (load it from google api)
document.write("<scr" + "ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></scr" + "ipt>");
}
setTimeout("initJQuery()", 50);
} else {
$(function() {
// do anything that needs to be done on document.ready
// don't really need this dom ready thing if used in footer
});
}
}
initJQuery();
!window.jQuery && document.write("");
Does the trick for me.
Any diffs in the final result?
Great code but if we want to use a jquery plugin, where do you have to insert the javascript file of this plugin exactly and how ? – To make the plugin file call after ‘http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js’ and before running our jQuery code.
i like to fondle myself while writing jquery.
Who doesn’t?
thats how we do it in jamaica
I’m not a programmer, so I’m having some issues understanding and implementing this.
Using the asynchronous way, what’s the deal with “fancyCode()”? It seems like you’re telling me to use .noConflict() everywhere, but in which way?
This does seem to work on a page that already had jQuery running, but it fails with “fancyCode is not defined” on a page that doesn’t have jQuery. If I remove that line, then it says, “thisPageUsingOtherJSLibrary is not defined” referring to the line inside of getscript().
Here’s the code I’m working on: http://noodle.mx/scripts/widgets.js
Thank you for giving such a wonderful way to handle the loading jquery dynamically in to the page. Thanks a lot again.
If you’re writing a jQuery plugin and want to load jQuery in case the user forgot to, the document.write method is the way to go, as the asynchronous method won’t prevent a user’s own document.ready function from firing before the script loads.
So, if you have the following situation:
You should use the document.write method in yourPlugin.js to make sure that jQuery loads before reaching the ready function.
Hope this helps other developers, and if anyone discovers how to make the asynchronous method work with the above, please comment below.
Slight typo between your-plugin.js and yourPlugin.js, but the logic still stands.
Actually, both of these solutions fail to consistently load jQuery before a separate $(function(){ }); which may make this an unacceptable solution for the plugin solution I was looking for.
Bummer. Back to the drawing board…
Thank you for this post ,
i tried
document.write method .
Thanks for correcting me here
“<scr" + "ipt
There’s an issue with missing/double quotes on the document.write sample… Since I also like to use ” for attributes, I always use ‘ for quoting strings:
document.write(‘<scr’ + ‘ipt type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></scr’ + ‘ipt>’);
This trick of breaking up the script tag no longer works in ie 11. There is security code that blocks it or a change in the js parser stopped this.
if(thisPageUsingOtherJSLibrary) -> if(!thisPageUsingOtherJSLibrary) ?
worked for me.. thanks
Thanks for giving valuable tips. It is working for me to add Jquery dynamically without duplicating.
Keep it up. Thanks Again!!!
You can easily use the following trick:
<head>
….
<script type=”text/javascript” > <src=”https://ajax.googleapis.com/ajax/libs/jquery/{version}/jquery.min.js”></script>
<script type=”text/javascript”>
function jqload()
{
if (typeof jQuery == “undefined”) {
var script = document.createElement (“script”);
script.type = “text / javascript”;
script.src = “jquery.min.js”;
document.getElementsByTagName (“head”) [0]. appendChild (script);
script.onload = mypageload;
script.onreadystatechange = function () {
if (script.readyState == “loaded” | | script.readyState == “complete”) {
mypageload ();}}
}
}
mypageload = function ()
{
htmlmypage = $ (“# mypage”). html ();
$ (“# mypage”). empty ();
$ (“# mypage”). html (htmlmypage);
htmlmypage= undefined;
}
</script>
…
</head>
<body onload=”jqload()”>
<div id=”mypage”>
…..
</div>
</ body>
all scripts in {div id = “mypage”} will initialize properly in this way after jquery is loaded
There was one error, I had to add the var at line 6, Example: var= thisPageUsingOtherJSLibrary
@Kevin: Same here! That’s definitely a typo. Thanks for the tip.
…or you could (and should) use RequireJS:
http://ajaxian.com/archives/requirejs-asynchronous-javascript-loading
None of these work.