JavaScript how to catch event when lazy loaded script is ready?

Question

I have a lazy loading JavaScript file, how can I catch the event when the class in the file is ready for usage? I only need to load this script in a specific case. Therefor it is not loaded via onload but in a if clause.

The lazy loading code I took from here: http://friendlybit.com/js/lazy-loading-asyncronous-javascript/

if (externalClassRequired) {
    var s   = document.createElement('script');
    s.type  = 'text/javascript';
    s.async = true;
    s.src   = 'http://yourdomain.com/script.js';
    var x   = document.getElementsByTagName('script')[0]
    x.parentNode.insertBefore(s, x);

    // When do I know when the class named "geo" is available?
}

Update:
Sorry guys, I totally forgot about Ajax! :) I was so focused on my problem that I didn't saw the obviously solution by @Tokimon. The simplest solution via jQuery would then be:

$.getScript('http://yourdomain.com/script.js', function() {
  // callback or use the class directly
});

jasssonpet · Accepted Answer · 2011-03-20 13:45:16Z

3

if (s.readyState) s.onreadystatechange = function () {
    if (s.readyState === "loaded" || s.readyState === "complete") {
        s.onreadystatechange = null;
        callback();
    }
}; else s.onload = function () {
    callback();
};

edited Mar 20, 2011 at 13:45

answered Mar 18, 2011 at 16:01

jasssonpet

2,11915 silver badges18 bronze badges

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

2 Comments

powtac Over a year ago

Ok, that means "loaded" (HTTP = 200) the class in the file is ready for usage?

jasssonpet Over a year ago

@powtac Yes, it means downloaded and parsed. The semicolon is there for a reason.

Tokimon · Accepted Answer · 2011-03-18 15:58:19Z

1

Or you could get the script via ajax. Then you are sure that the script is loaded when the ajax succes event is fired :)

answered Mar 18, 2011 at 15:58

Tokimon

4,1921 gold badge22 silver badges27 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:11:53Z

1

If I understand what you want to accomplish correctly. This is why callback methods exist.

Explained pretty well here Getting a better understanding of callback functions in JavaScript

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Mar 18, 2011 at 15:57

Matthew Vines

27.7k7 gold badges80 silver badges99 bronze badges

Comments

Mads Mogenshøj · Accepted Answer · 2011-03-18 16:00:21Z

1

As it requires a HTTP request, you should be able to put an onload event on it.

s.onload = function() {
  // do something
}

In 'Even Faster Web Sites' Steve Souders offer a solution, which can be seen here.

edited Mar 18, 2011 at 16:00

answered Mar 18, 2011 at 15:55

Mads Mogenshøj

2,0581 gold badge16 silver badges23 bronze badges

Comments

Josiah Ruddell · Accepted Answer · 2011-03-18 16:01:32Z

1

var onloadCallback = function() {
    alert('onload');
}

var s   = document.createElement('script');
s.type  = 'text/javascript';
s.async = true;
s.onreadystatechange = function () { // for IE
  if (this.readyState == 'complete') onloadCallback();
};
s.onload = onloadCallback; // for other browsers
s.src   = 'http://yourdomain.com/script.js';
var x   = document.getElementsByTagName('script')[0]
x.parentNode.insertBefore(s, x);

You could also use an XMLHttpRequest to load the file.

answered Mar 18, 2011 at 16:01

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

1 Comment

jasssonpet Over a year ago

Opera will fire the callback twice.

Collectives™ on Stack Overflow

JavaScript how to catch event when lazy loaded script is ready?

5 Answers 5

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related