How to execute a function when jQuery is loaded?

Question

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?

Are you dynamically appending jQuery to the DOM in the bookmarklet? — pimvdb, Aug 15 '11 at 13:15

ManoCarayannis · Answer 1 · 2015-01-27T00:12:14.373

5

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

edited Jan 27 '15 at 00:12

answered Sep 20 '14 at 13:22

ManoCarayannis

811
9
9

1

I don't know who downvoted this, but it's a working solution. – ManoCarayannis Jan 31 '15 at 15:15
no me but i'd, I'm personally always against any "timeout function" usage anywhere in any occasion] – Bishoy Hanna Sep 17 '20 at 03:35

score 3 · Accepted Answer · answered Aug 15 '11 at 13:16

3

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

answered Aug 15 '11 at 13:16

pimvdb

151,816
78
307
352

Ah, this looks good and seems to work! :) Thanks. I wasn't aware of that event handler. – js-coder Aug 15 '11 at 13:20
@dotweb: Cheers. Just to make it sure, it's advisable to put `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. – pimvdb Aug 15 '11 at 13:24
Thanks! I actually put the `onload` after the `src`. Now it's the other way around! :) – js-coder Aug 15 '11 at 13:27
@pimvdb, setting the `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. – zzzzBov Aug 15 '11 at 14:00
@zzzzBov: I messed it up with `Image`. Thanks for clarifying! – pimvdb Aug 15 '11 at 15:29
@pimvdb if you're talking about the `img` element, there's no issue with the attribute order there either for exactly the same reasons. – zzzzBov Aug 15 '11 at 19:38
@zzzzBov: I was once told otherwise in fact: http://stackoverflow.com/questions/6775767/how-can-i-draw-an-image-from-the-html5-file-api-on-canvas/6776055#6776055. – pimvdb Aug 15 '11 at 21:45
@pimvdb, Raynos is incorrect in this case. Even if the image was fully loaded somehow after you set the `src` attribute, it would have to wait until the currently executing code was finished before the event could be fired, at which point the handler would already be attached. If you think there's a chance I'm incorrect, I urge you to produce an example where an item is loaded without error *and* where the event doesn't fire. – zzzzBov Aug 15 '11 at 22:28
@zzzzBov: Since I cannot reproduce what Raynos said, I will agree with you. – pimvdb Aug 16 '11 at 09:24
@pimvdb, Raynos has provided a good example where it *does* break for images in older versions of IE. It's not supposed to work that way, but what can you do. I redact my previous statement. – zzzzBov Aug 16 '11 at 13:33

score 2 · Answer 3 · answered Aug 15 '11 at 13:57

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

score 0 · Answer 4 · answered Sep 17 '20 at 04:25

0

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

answered Sep 17 '20 at 04:25

Bishoy Hanna

4,539
1
29
31

score -5 · Answer 5 · answered Aug 15 '11 at 13:17

-5

Michael is right. You could also use this shorthand

$(function() {
    // Code for on docload here
});

answered Aug 15 '11 at 13:17

k4t434sis

519
4
17

2

He is not. What if jQuery is not loaded before this is executed? Everything will fail. ;) – js-coder Aug 15 '11 at 13:18

How to execute a function when jQuery is loaded?

5 Answers5