How do i get callback after all scripts loaded?

Question

How do I know all scripts loaded in below code?

function loadExternalResource(url, type, callback){
    var _css, _script, _document = document;
    if(type === 'css'){
        _css = _document.createElement("link");
        _css.type = 'text/css';
        _css.rel = 'stylesheet';
        _css.href = URL;
        _document.getElementsByTagName("head")[0].appendChild(_css);
    }
    else if(type === "js")
    {
            _script = _document.createElement("script");
            _script.type = "text/javascript";
            _script.src = URL;
            _script.onload = callback;
            _document.getElementsByTagName("head")[0].appendChild(_script);
    }
}

//Loading All Css Here
loadExternalResource('/css/common.css','css');
loadExternalResource('/css/main.css','css');

//Load All Scripts here
loadExternalResource('/js/general.js','js', function(){
    alert('general js loaded');
});
loadExternalResource('/js/validation.js','js', function(){
    alert('validation js loaded');
});
loadExternalResource('/js/core.js','js', function(){
    alert('core js loaded');
});
loadExternalResource('/js/library.js','js', function(){
    alert('library js loaded');
});

In Above Code, I am getting callback for every single js file loaded, but how to know all scripts loaded here?

Possible duplicate of [load scripts asynchronously](http://stackoverflow.com/questions/7718935/load-scripts-asynchronously) — Rayon, Dec 12 '15 at 08:32
You can register a handler to the "on load" event of those scripts. — arkascha, Dec 12 '15 at 08:32

jfriend00 · Accepted Answer · 2015-12-12T09:21:19.153

Here's an idea using promises. The general idea is that you change the function loadExternalResource() to return a promise that is resolved when the resource is loaded. You can then collect any number of these promises into an array and use Promise.all() to see when all of them are done. For convenience, I put this functionality into a master function called loadMultipleExternalResources() that loads an array of URLs.

Here's the code:

function loadExternalResource(url, type){
    return new Promise(function(resolve, reject) {
        var tag;
        if (!type) {
            var match = url.match(/\.([^.]+)$/);
            if (match) {
                type = match[1];
            }
        }
        if (!type) {
            type = "js";       // default to js
        }

        if (type === 'css'){
            tag = document.createElement("link");
            tag.type = 'text/css';
            tag.rel = 'stylesheet';
            tag.href = url;
        }
        else if (type === "js")
        {
            tag = document.createElement("script");
            tag.type = "text/javascript";
            tag.src = url;
        }
        if (tag) {
            tag.onload = function() {resolve(url);};
            tag.onerror = function() {reject(url);};
            document.getElementsByTagName("head")[0].appendChild(tag);
        }
    });
}

function loadMultipleExternalResources(itemsToLoad) {
    var promises = itemsToLoad.map(function(url) {
        return loadExternalResource(url);
    });
    return Promise.all(promises);    
}

//Loading All Css Here
var urls = ['/css/common.css', '/css/main.css', '/js/general.js', '/js/validation.js', '/js/core.js','js', '/js/library.js'];

loadMultipleExternalResources(urls).then(function() {
    // all these resources loaded here
});

Or, using your callback scheme, you could manually keep a counter of the number of files that are loaded:

function loadExternalResource(url, type, callback){
    var tag;

    ++loadExternalResource.cnt;
    if (type === 'css'){
        tag = _document.createElement("link");
        tag.type = 'text/css';
        tag.rel = 'stylesheet';
    }
    else if (type === "js")
    {
        tag = _document.createElement("script");
        tag.type = "text/javascript";
        tag.src = url;
    }
    if (tag) {
        tag.onload = function() {
            --loadExternalResource.cnt;
            callback(loadExternalResource.cnt, url);
        }
        tag.getElementsByTagName("head")[0].appendChild(tag);
    }
}

loadExternalResource.cnt = 0;

//Loading All Css Here
loadExternalResource('/css/common.css','css', checkAllDone);
loadExternalResource('/css/main.css','css', checkAllDone);

//Load All Scripts here
loadExternalResource('/js/general.js','js', checkAllDone);
loadExternalResource('/js/validation.js','js', checkAllDone);
loadExternalResource('/js/core.js','js', checkAllDone);
loadExternalResource('/js/library.js','js', checkAllDone);

function checkAllDone(cnt, url) {
    if (cnt === 0) {
        // all scripts and CSS files loaded now
    }
}

I added a means of doing it using your callback scheme too. – jfriend00 Dec 12 '15 at 09:21 — jfriend00, Dec 12 '15 at 09:21

score 1 · Answer 2 · answered Nov 25 '18 at 23:49

1

May you use jQuery?

With $.when is quite simple. You just do

$.when($getScript("file1.js"), 
       $getScript("file2.js"), 
       $getScript("file3.js")).
       done(function(){
          //code here
       }
);

answered Nov 25 '18 at 23:49

João Pimentel Ferreira

14,289
10
80
109

How do i get callback after all scripts loaded?

2 Answers2