CODEWITHSUNDEEP
javascript
S Kumaresan
S Kumaresan

Reputation: 3

How do i get callback after all scripts loaded?

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?

Upvotes: 0

Views: 2015

Answers (2)

João Pimentel Ferreira
João Pimentel Ferreira

Reputation: 16263

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
       }
);

Upvotes: 1

jfriend00
jfriend00

Reputation: 707736

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
    }
}

Upvotes: 2

Related Questions