I am building a website that uses some external js files. I load the files via the code below, but I am not sure how to proceed if one or more of the files fails downloading. Should I just keep requesting them until all of them download? Is it better to do a separate onload event for each file? How would I know which file has failed loading and needs to be requested again?

var filesToLoad = [".3.5/js/bootstrap.min.js"];

var loader = new ScriptLoader();
filesToLoad.forEach(function(file) {
    loader.add(file);
});

loader.loaded(function(failedCallbackF) {
    console.log("Error.");
    //Try getting the files again??
});

function ScriptLoader() {
    var promises = [];

    this.add = function(url) {
        var promise = new Promise(function(resolve, reject) {

            var script = document.createElement('script');
            script.src = url;

            script.addEventListener('load', function() {
                resolve(script);
            }, false);

            script.addEventListener('error', function() {
                reject(script);
                console.log('was rej');
            }, false);

            document.body.appendChild(script);
        });

        promises.push(promise);
    };

    this.loaded = function(callbackOnFailed) {
        Promise.all(promises).then(function(result1) {
            console.log('Script loaded from:', result1);
        }, callbackOnFailed);
    };
}

I am building a website that uses some external js files. I load the files via the code below, but I am not sure how to proceed if one or more of the files fails downloading. Should I just keep requesting them until all of them download? Is it better to do a separate onload event for each file? How would I know which file has failed loading and needs to be requested again?

var filesToLoad = ["https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"];

var loader = new ScriptLoader();
filesToLoad.forEach(function(file) {
    loader.add(file);
});

loader.loaded(function(failedCallbackF) {
    console.log("Error.");
    //Try getting the files again??
});

function ScriptLoader() {
    var promises = [];

    this.add = function(url) {
        var promise = new Promise(function(resolve, reject) {

            var script = document.createElement('script');
            script.src = url;

            script.addEventListener('load', function() {
                resolve(script);
            }, false);

            script.addEventListener('error', function() {
                reject(script);
                console.log('was rej');
            }, false);

            document.body.appendChild(script);
        });

        promises.push(promise);
    };

    this.loaded = function(callbackOnFailed) {
        Promise.all(promises).then(function(result1) {
            console.log('Script loaded from:', result1);
        }, callbackOnFailed);
    };
}

• javascript
• jquery
• promise

• Are those scripts required for your application to work? If that's the case, what other option do you have? – Joaquín O Commented Aug 29, 2015 at 22:06
• In my opinion you have to create new instance for each file. The benifite of this will be that if any file will fail to load then in its error function you can reload it only. – Eshu Commented Aug 29, 2015 at 22:19
• @Joanquin O Should I restructure my code to have it so every time reject(script) is hit, a new promise is made and it goes in a loop like that until all promises are resolved? – Autumn Commented Aug 29, 2015 at 22:24

2 Answers 2

Well, there is an official API for it called "dynamic import", I remend that you use it or shim it (with something like SystemJS or with a tool that supports it like webpack).

import("yourScriptFile.js").then(function(){
   // script loaded.
});

If you want to load multiple files you can also use it:

Promise.all(["url1", "url2"].map(System.import)).then(function(){
    // loaded all here
});

May be this will help you.

var filesToLoad = ["https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"];   

filesToLoad.forEach(function(file) {
    var loader = new ScriptLoader();
    loader.add(file)
    loader.loaded(function(failedCallbackF) {
        console.log("Error.");
        //reload this file
    });

});

function ScriptLoader() {
    var promises = [];

    this.add = function(url) {
        var promise = new Promise(function(resolve, reject) {

            var script = document.createElement('script');
            script.src = url;

            script.addEventListener('load', function() {
                resolve(script);
            }, false);

            script.addEventListener('error', function() {
                reject(script);
                console.log('was rej');
            }, false);

            document.body.appendChild(script);
        });

        promises.push(promise);
    };

    this.loaded = function(callbackOnFailed) {
        Promise.all(promises).then(function(result1) {
            console.log('Script loaded from:', result1);
        }, callbackOnFailed);
    };
}