Waiting on JS class load from dynamic script loading

Question

I have a JS script which depends on jQuery.

I want to check for jQuery, and if it is not loaded/available add it myself, wait for it to load, and then define my script class.

The code I currently use:

// load jQuery if not loaded yet
if (typeof (jQuery) == 'undefined') {
  var fileref = document.createElement('script');
  fileref.setAttribute("type", "text/javascript");
  fileref.setAttribute("src", 'http://code.jquery.com/jquery-1.4.4.min.js');
  document.getElementsByTagName('body')[0].appendChild(fileref);

  (ready = function() {
    if ( typeof (jQuery) == 'undefined' || !jQuery) {
      return setTimeout( ready, 1 );
    } else {
      // jQuery loaded and ready
      jQuery.noConflict();
    }
  })();
}

// … class definition follows
var MView = function() …

Now, with FireFox 4 (I think it did work before, or execution was just too slow), it will continue the scripts execution even when I still want to wait on jQuery. The recursive setTimeout is non-blocking.

How can I fix this? Make setTimeout blocking? Use another approach? Is there a better way? A way at all?

The class should be global scope, so it can be used on the page that includes this script file.

Possible duplicate of dynamic script loading synchronization — jherax
– jherax, Commented Aug 9, 2016 at 17:07
Check this related answer out: Load ordering of dynamically added script tags — jherax
– jherax, Commented Aug 9, 2016 at 17:07

tilleryj · Accepted Answer · 2011-03-23 22:53:12Z

7

I would recommend 2 things.

Use 'if (!jQuery)' since undefined is considered falsey
Use the script tag's onload event


if (!window.jQuery) {
    var fileref = document.createElement('script');
    fileref.setAttribute("type", "text/javascript");
    fileref.setAttribute("src", 'http://code.jquery.com/jquery-1.4.4.min.js');
    fileref.onload = function() {
        // Callback code here
    };
    document.getElementsByTagName('body')[0].appendChild(fileref);
}

answered Mar 23, 2011 at 22:53

tilleryj

14.4k3 gold badges26 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kissaki Over a year ago

Even if I define my class as window.class there then, I will not be able to use it on the page, as that won’t wait on load.

tilleryj Over a year ago

Try putting your class definition into a function, and invoke that function after jQuery is loaded.

Volodymyr Krupach Over a year ago

Was playing stupid games with setTimeout and onload event is what I needed. Thank you!

Collectives™ on Stack Overflow

Waiting on JS class load from dynamic script loading

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related