Get the files being loaded Javascript

Question

I have a web application that is loading alot of js files. So i need to put a splash/loading page when the user first load the page.

Is there a way to get the specific file being loaded realtime? Like for example, I want to see on my splash screen..

"Loading SampleModule.js.."

I searched the web and here in SO but I cant find any docs that can help me. I'm not sure if I'm using the right key word or what.

Hope someone can help me with this.

Answer 1

You might be able to wire something up with RequireJS but what I would do if this was my app, is resolve a promise in every file that pushes its own file name to an app-level array of "loaded" files, and your app simply dumps those to the dom as they come in.

You could also do something like this:

var APP = {
    $loaderMsg : $('#loading')
};

$.when(
    APP.$loaderMsg.html('Loading Script 1');
    $.getScript('/app/js/script1.js'),
).then(
    APP.$loaderMsg.html('Loading Script 2');
    $.getScript('/app/js/script2.js'),
).then(
    APP.$loaderMsg.html('Loading Script 3');
    $.getScript('/app/js/script3.js'),
).done(
    someInitFunction
);     

Answer 2

Try using the jquery api getscript

$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
console.log( data ); // Data returned
console.log( textStatus ); // Success
console.log( jqxhr.status ); // 200
console.log( "Load was performed." );
});

For documentation please refer this

Hope this helps ....