Loading external scripts async in JavaScript

Question

This is my first module i'm writing in JS and I want to make sure i'm doing it right. It is going to be a simple gallery module but I want it to be able to display youtube and vimeo movies also. In my module I have function called init(). Before i'm displaying the gallery first I want to add all necessary libs, like youtube iframe api and vimeo js api. only after they are loaded I want to display the gallery. so my module looks something like this:

myModule = {};
myModule.isYoutubeApiLoaded = false;
myModule.isVimeoApiLoaded = false;
myModule.controller;
myModule.init = function (){
   myModule.loadYoutubeapi();
   myModule.loadVimeoApi();
   myModule.startController();
}

now startController function looks like this:

myModule.startController  = function (){
   myModule.controller = setInterval(function(
       if (myModule.isYoutubeApiLoaded && myModule.isVimeoApiLoaded ) {
             myModule.buildGallery();
             clearInterval(myModule.controller);
        }
   ), 5);
}

in loadYoutubeapi() and loadVimeoApi() i'm setting the given flags when scripts are loaded. is it a good approach?

Andrej · Accepted Answer · 2013-09-10 10:01:16Z

No, it's not a good approach. It will load CPU and will possibly have unnecessary delay of 5 milliseconds.

Better way would be to add callbacks to loadYoutubeapi() and loadVimeoApi(). Once they finish they must call your new function (e.g. moduleHasLoaded()), which will count loaded modules. When all will be loaded you can call startController().

It will save CPU and will not have a unnecessary delay at all.

Something like this:

myModule = {};
myModule.isYoutubeApiLoaded = false;
myModule.isVimeoApiLoaded = false;
myModule.loaded = false;
myModule.controller;

myModule.loadYoutubeapi = function() {

    /* Do your stuff. */

    myModule.isYoutubeApiLoaded = true;

    myModule.moduleHasLoaded();
}

myModule.loadVimeoApi = function() {

    /* Do your stuff. */

    myModule.isVimeoApiLoaded = true;

    myModule.moduleHasLoaded();
}

myModule.moduleHasLoaded = function() {

    if (!loaded && myModule.isYoutubeApiLoaded && myModule.isVimeoApiLoaded ) {
        loaded = true;
        myModule.buildGallery();
    }

}

myModule.init = function (){
    myModule.loadYoutubeapi();
    myModule.loadVimeoApi();
}

Nikos Paraskevopoulos · Accepted Answer · 2013-09-10 09:57:37Z

1

The simple solution is to use a script loader like lazyload. It allows you to specify the scripts you want to load and run a callback when the are actually loaded, i.e.:

LazyLoad.js([
        "http://www.youtube.com/apiplayer?enablejsapi=1&version=3",
        "...vimeo script...",
        "...other scripts..."
    ],
    function() {
        myModule.buildGallery();
    }
);

The function will be called when all scripts are loaded. The caveat is that you get no error callback, i.e. if a script fails to load. There are also other script loaders besides lazyload.

More complicated solution, but better if you are working on a medium to large size client-side application: Refactor your modules to use require.js.

answered Sep 10, 2013 at 9:57

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

Collectives™ on Stack Overflow

Loading external scripts async in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related