
LoadJS – A tiny async loader for modern browsers (710 bytes) - andres
https://github.com/muicss/loadjs?a=1
======
pygy_
[https://github.com/walmartlabs/little-
loader](https://github.com/walmartlabs/little-loader) is smaller (519 bytes
min+gzipped), supports IE8, and fires either on script load or on error
synchronoulsy (so that globals won't be overwritten by code that runs between
script loading and the callback firing). The thing is tested on SauceLabs down
to IE8.

The drawback is a lower level API, and it is JS only. AFAIK loading CSS
consistently cross browser is also a mine field if you want consistent error
handling.

    
    
        window._lload("http://example.com/foo.js", function (err) {
            // `err` is script load error.
            // otherwise, foo.js is loaded!
          }/*, [optional context (`this`) variable here] */);

~~~
andres
The original bare-bones version of LoadJS was down to 455 bytes and grew to
710 as we added some useful features (e.g. CSS loading, async false support,
load retries).

Initially I was hesitant to add CSS support because handling load errors
across browsers is very tricky but I think we came up with a good solution [1]
that is tested down to IE9 [2].

[1]
[https://github.com/muicss/loadjs/blob/master/src/loadjs.js#L...](https://github.com/muicss/loadjs/blob/master/src/loadjs.js#L109-L119)

[2]
[https://github.com/muicss/loadjs/blob/master/test/tests.js#L...](https://github.com/muicss/loadjs/blob/master/test/tests.js#L188-L301)

~~~
pygy_
Good job on detecting CSS loading failures.

The little-loader also has a section to detect JS loading and errors in IE8/9
(with a dedicated sub-section for the former), I didn't see anything like this
in LoadJS... Did you find a terser workaround?

[https://github.com/walmartlabs/little-
loader/blob/42d233f360...](https://github.com/walmartlabs/little-
loader/blob/42d233f360162bb01fce5a9664b6ef54751bd96e/lib/little-
loader.js#L101-L207)

I'm somewhat familiar with little-loader because I've worked at making it
smaller, but I'm not competent to judge whether its approach is necessarily
the best...

~~~
andres
We use the `onerror` handler to detect load errors on IE9:
[https://github.com/muicss/loadjs/blob/master/src/loadjs.js#L...](https://github.com/muicss/loadjs/blob/master/src/loadjs.js#L106-L134)

------
franciscop
This looks like the perfect case for using Promises...

    
    
        loadjs('foobar').then(() => {
          // foobar.js loaded
        });
    

And then with the newer spec:

    
    
        await loadjs('foobar');
        // foobar.js loaded
    

Such a pity that instead it uses a proprietary format.

Edit: you could still add all other nice things without compromising the main
thing, for example to add a "before":

    
    
        loadjs.before(fnA).before(fnB).load('foobar').then(() => {});

~~~
thomasfoster96
Someone please correct me if I’m wrong, but I’m pretty sure await has to be
within an async function [0].

[0] [https://github.com/tc39/ecmascript-
asyncawait/issues/36](https://github.com/tc39/ecmascript-asyncawait/issues/36)

~~~
Klathmon
Yeah but we can use the same "trick" we've been using for years, an IIFE:

    
    
        (async () => { 
          // Code...
        })()

~~~
denisw
This will wait within the function, but won't block the caller.

~~~
Klathmon
which is what it should do

If you want the caller to "block", then it needs to await or .then() what it's
calling.

------
gliptic
I made a similar thing that is supposed to be vaguely require.js compatible in
541-588 bytes, depending on enabled features [1]. Not production ready :).

[1]
[https://github.com/gliptic/hypjs/blob/master/src/amd.ts](https://github.com/gliptic/hypjs/blob/master/src/amd.ts)

------
alz
[https://github.com/QubitProducts/micro-
amd](https://github.com/QubitProducts/micro-amd) is another project with
similar goals. Its pretty small, amd compliant and battle tested

------
tannerwj
Seems handy for the callbacks, but will this be as useful once http2 is the
default?

~~~
jazoom
Yes. I'm thinking about using it for conditionally rendered stuff.

------
lloydjatkinson
back in the day you just did script src... none of this bullshit

~~~
Exuma
It's not 1999 anymore

------
manishsharan
Wow. This makes Labjs, which has been my preferred loader, seem heavy.

------
Exuma
That's cool. Would this help with my page speed score that almost is always
like a D- for stuff related to async/css/js and 'deferred' loading?

~~~
helb
Maybe, but you can make it better even without any fancy loaders, async and
defer are regular attributes of the script tag –
[https://developer.mozilla.org/en/docs/Web/HTML/Element/scrip...](https://developer.mozilla.org/en/docs/Web/HTML/Element/script#Attributes)

~~~
Flimm
`defer` has problems:
[http://stackoverflow.com/a/40535440/247696](http://stackoverflow.com/a/40535440/247696)

There is no obvious easy way to wait for an `async` script to finish loading
and executing before running code that depends on it. For instance, how would
I load the jQuery library asynchronously before running code that depends on
jQuery?

------
jarnix
It seems to lack the handling of timeouts, which is necessary in these async
days.

