Display "Loading" Message While Loading External JavaScript?

Question

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 are loaded.

What's the best way to do this?

score 0 · Answer 1 · answered Sep 06 '11 at 14:55

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

 });

score 0 · Answer 2 · edited May 23 '17 at 11:50

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

Display "Loading" Message While Loading External JavaScript?

2 Answers2