Async Load JavaScript Files with Callback

Question

I am trying to write an ultra simple solution to load a bunch of JS files asynchronously. I have the following script below so far. However the callback is sometimes called when the scripts aren't actually loaded which causes a variable not found error. If I refresh the page sometimes it just works because I guess the files are coming straight from the cache and thus are there quicker than the callback is called, it's very strange?

var Loader = function () {

}
Loader.prototype = {
    require: function (scripts, callback) {
        this.loadCount      = 0;
        this.totalRequired  = scripts.length;
        this.callback       = callback;

        for (var i = 0; i < scripts.length; i++) {
            this.writeScript(scripts[i]);
        }
    },
    loaded: function (evt) {
        this.loadCount++;

        if (this.loadCount == this.totalRequired && typeof this.callback == 'function') this.callback.call();
    },
    writeScript: function (src) {
        var self = this;
        var s = document.createElement('script');
        s.type = "text/javascript";
        s.async = true;
        s.src = src;
        s.addEventListener('load', function (e) { self.loaded(e); }, false);
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(s);
    }
}

Is there anyway to test that a JS file is completely loaded, without putting something in the actual JS file itself, because I would like to use the same pattern to load libraries out of my control (GMaps etc).

Invoking code, just before the tag.

var l = new Loader();
l.require([
    "ext2.js",
    "ext1.js"], 
    function() {
        var config = new MSW.Config();
        Refraction.Application().run(MSW.ViewMapper, config);
        console.log('All Scripts Loaded');
    });

Thanks for any help.

In the latest WebKit, does it in the latest dev version of Chrome as well :( — Gcoop
– Gcoop, Commented Jun 13, 2010 at 15:38
I can't reproduce this using Chromium 5.0.375.70, loading two scripts from a CDN and one from localhost (containing a function necessary to execute a line inside the callback function). But is the async flag really necessary? What happens if you comment s.async = true; out? — Marcel Korpel
– Marcel Korpel, Commented Jun 13, 2010 at 16:48
@galambalazs the script is for an mobile web app, IE is fortunately not a concern :D — Gcoop
– Gcoop, Commented Jul 12, 2010 at 14:01

Caolan · Accepted Answer · 2010-07-11 10:11:50Z

4

Just in case you find this useful, I've created an async utility library that would let you write the above code as:

var Loader = function () {}

Loader.prototype = {
    require: function (scripts, callback) {
        async.map(scripts, this.writeScript, callback);
    },
    writeScript: function(src, callback) {
        var s = document.createElement('script');
        s.type = "text/javascript";
        s.src = src;
        s.addEventListener('load', function (e) { callback(null, e); }, false);
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(s);
    }
}

If you're doing lots of asynchronous calls it has some quite powerful features :)

http://caolanmcmahon.com/async.html

edited Jul 11, 2010 at 10:11

answered Jul 9, 2010 at 10:14

Caolan

3,9391 gold badge20 silver badges8 bronze badges

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

Comments

Rajesh Shelar · Accepted Answer · 2011-12-26 14:07:51Z

4

What about jQuery....

$.getScript('abc.js');

Above code will load the "abc.js" script file asynchronously....

edited Dec 26, 2011 at 14:07

user212218

answered Jul 9, 2010 at 14:45

Rajesh Shelar

512 bronze badges

2 Comments

Gcoop Over a year ago

I am using the xui framework already and don't want to include the jQuery framework as well, it will just add extra weight :) Although I didn't know jQuery could do this, thanks!

Flimm Over a year ago

getScript does not have a callback which is called once the script has been executed.

Pablo Moretti · Accepted Answer · 2012-10-11 00:45:14Z

3

I recommend you use a tiny loader javascript like JcorsLoader (only 647B with Gzip)

JcorsLoader.load(
                "http://xxxx/jquery.min.js",
                function() {
                    $("#demo").html("jQuery Loaded");
                },
                "http://xxxx/jquery.cookie.js",
                function() {  
                    $.cookie('not_existing'); 
                }
            );

Load multiples js in parallel and execute in order without blocking DOMReady or onload.

https://github.com/pablomoretti/jcors-loader

edited Oct 11, 2012 at 0:45

answered Oct 11, 2012 at 0:37

Pablo Moretti

1,43414 silver badges10 bronze badges

Comments

Aaron Butacov · Accepted Answer · 2014-01-24 09:12:16Z

2

There is nothing wrong with your code from what I can tell, this is just a bug in Chrome (it does it with window.onload also.)

I'd add it to the function that is triggered in the "load" function. If the variable exists, execute the JS code, but if it doesn't, use a setTimeout to check again in 500ms or so.

edited Jan 24, 2014 at 9:12

answered Jun 13, 2010 at 16:46

Aaron Butacov

34.7k8 gold badges49 silver badges62 bronze badges

2 Comments

Marcel Korpel Over a year ago

You can also test for a function being present: e.g., if you want to load jQuery this way, you can test for the $ function being present in global scope: if ('$' in window) /* do something */;

Gcoop Over a year ago

Thanks added this check as well :)

Plokko · Accepted Answer · 2011-04-24 15:01:23Z

Like Aaron says there's a bug in chrome,but there are also problems on IE and other browsers.

I tryed different ways to create my lazy loader and i had a lot of problems:

adding a <script> tag : problems with script events(onload,onerror,etc.) in explorer and other browsers
reading a script with ajax and parsing the text(with eval,it's javascript so don't worry it's not evIl) : VERY difficult to debug (it's parsed as a single line without comments so you can't know what line gives you an error)
reading the script with ajax and adding a <script> tag with the text of the script: works very well on all browsers; you can create async and sync loading with the same function and you can also control very well errors,loading etc.(if you know the basics of ajax you should know how to handle variuous http state) and it's what i recommend.

Heena Jain · Accepted Answer · 2013-09-13 06:34:32Z

0

jcors-loader.js not working in Internet Explorer...

Index.html

<html>
    <head>
    <script type="text/javascript" src="/js/jcors-loader.js"></script>
    <script>
        JcorsLoader.load(
                "js/jquery-1.8.0.js",
                "/js/alertme.js",
                function() {
                    $("#result").text("TEST OK");
                }
        );

    </script>
    </head>
    <body>
    <h1 id="result"></h1>
    </body>
    </html>

alertme.js

alert("Loaded");

This works fine in chrome and firefox it displays "TEST OK" and popup...But no message or alert in IE(7,8,9)...Any help will be appreciated.

answered Sep 13, 2013 at 6:34

Heena Jain

451 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

Async Load JavaScript Files with Callback

6 Answers 6

Comments

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related