Display "Loading" Message While Loading External JavaScript?

So, I know how to use JS or jQuery, etc., to display a "Loading" message while content is loading. I have created a fairly large webapp with a number of JS dependencies and I want to display a "loading" message while all the scripts are loading.

My head tag has a number of <script src=…> tags in it and I want to display a loading message instantly when the user visits the page, and then remove it when all the scripts ar开发者_StackOverflow社区e loaded.

What's the best way to do this?

---

Then use $ajax function of jquery to download this javascript files and the add script element in head tag after downloading completes.

like this:

// display loading message here 

 $ajax("javascriptfile.js",function(file){

  // attach downloaded file to head tag now

 });

---

You probably need to lazy loading of the script. The last example from this Lazy Loading show to load .js via YUI. The code from that example is included below for your reference:

var HelloWorld = {
    is_loaded: false,
    lazyLoad: function(callback) {
        var loader = new YAHOO.util.YUILoader();
        loader.addModule({
            name: "helloworld",
            type: "js",
            fullpath: "yui_ex/helloworld.js"
        });
        loader.require("helloworld");
        if (callback) {
            loader.onSuccess = callback;
        }
        loader.insert();
    },
    sayIt: function() {
        var args = arguments;
        HelloWorld.lazyLoad(function() { HelloWorld.sayIt.apply(HelloWorld, args); });
    }
};

Note that you could possibly load the loading image initially and remove it in the callback function. Reading SO Question JQuery to load Javascript file dynamically, you could also use $.getScript() to do the same thing.

You could also find another example in this link