I'm making a bookmarklet and using jQuery for it (with noConflict). I need to wait for jQuery to load, to execute all the jQuery code.
I know I can check with typeof $ for jQuery, but I'm actually more looking for an event handler. Right now I'm just using setTimeout with a delay of 1s, because jQuery is proberly loaded then.
I feel this is not a good solution. It's not clean code and relies on jQuery to load in 1s.
Is there any other way to afford this?
Just for the records, completeness and for those that didn't know: Without an event handler, a good alternative would be to poll for jQuery every X amount of time. Ex:
function is_jquery_here(){
setTimeout(function(){
if(window.jQuery){
my_jquery_code_here();
} else {
is_jquery_here();
}
}, 300);
}
is_jquery_here();
Since you say you're appending it dynamically, you could make use of onload:
var elem = document.createElement('script');
elem.onload = function() {
// script is loaded, you can now do things with jQuery
};
elem.src = 'path to jquery';
document.getElementsByTagName('head')[0].appendChild(elem);
onload before setting src. Otherwise, the script might have loaded before you set the onload event (if it's a small script or loaded very fast), and the handler will not execute anymore.onload after the src. Now it's the other way around! :)
src attribute does not start the script loading. the script element will only begin being loaded when it is added to the document and the currently running script has finished. The appendChild line adds the script element to the document, so when the script has finished executing, the script element will load. There is no issue on which order which attribute is added.Image. Thanks for clarifying!Not every browser supports .onload for script elements, so if you need cross-browser compatibility, use onreadystatechange as well:
function load( src, callback )
{
var s,r;
s = document.createElement('script');
s.type = 'text/javascript';
s.src = src;
s.onload = s.onreadystatechange = function(){
if ( !r && ( !this.readyState || this.readyState == 'complete' ) )
{
r = 1;
callback();
}
};
document.body.appendChild(s);
}
If you have jQuery script in the page and you just want to make sure its loaded first, then I'd highly recommend that one
window.onload = function() {
//.....your jquery code....
};
