Is there any way to postpone loading some modules in jQuery and MooTools?

Question

Is there any built-in solution to postpone loading some modules after complete loading of page and some other essential modules, in jQuery and MooTools?

Or is there a way to load wanted modules when they are need? for example by clicking on a button ,I mean to ask for loading modules via script itself.

I have to choose one of these frameworks and delayed loading is one of my important priorities.

Just load the appropriate `.js` file(s) whenever you want/need. — Qtax, Jul 06 '11 at 13:09

Dimitar Christoff · Accepted Answer · 2011-07-06T13:41:14.013

for mootools, you can use Asset.javascript from mootools-more.

eg.

if (somelogic) {
    new Asset.javascript("somefile.js", {
        onload: function() {
            // call something defined / dependent on somefile.js being there.
        }

    });
}

Asset.js can also support lazy-loading of css, image or images and can easily be rewritten to work with multiples of js files that need to be brought in sequentially.

Asset.javascripts = function(sources, options) {
    // load an array of js dependencies and fire events as it walks through
    options = Object.merge({
        onComplete: Function.from,
        onProgress: Function.from
    }, options);
    var counter = 0, todo = sources.length;

    var loadNext = function() {
        if (sources[0])
            source = sources[0];

        Asset.javascript(source, {
            onload: function() {
                counter++;
                options.onProgress.call(this, counter, source);
                sources.erase(source);

                if (counter == todo)
                    options.onComplete.call(this, counter);
                else
                    loadNext();
            }
        });
    };

    loadNext();
};

which I then use like so (for example, to bring in a date picker if not loaded already):

if (!window.Picker) {
    new Asset.javascripts([
        "/js/mylibs/Locale.en-US.DatePicker.js",
        "/js/mylibs/Picker.js",
        "/js/mylibs/Picker.Attach.js",
        "/js/mylibs/Picker.Date.js"
    ], {
        onComplete: function() {
            new Asset.css("/js/mylibs/datepicker.css");
            new Asset.css("/js/mylibs/datepicker_dashboard/datepicker_dashboard.css");

            doDates();
        }
    });
}
else {
    doDates();
}

score 2 · Answer 2 · edited May 23 '17 at 12:27

2

You can do this in jQuery with getScript. See this answer: JQuery to load Javascript file dynamically

edited May 23 '17 at 12:27

Community

1
1

answered Jul 06 '11 at 13:20

Ira Rainey

5,029
2
30
41

score 1 · Answer 3 · answered Jul 06 '11 at 13:24

1

Why not load your assets asynchronously? There are various script libraries for this. The one I use at the moment is head.js. You can set up a number of dependencies and dictate which modules load and when.

I tend to test for the presence of a specific DOM element before loading its required plug-in - this tends to limit scripts being loaded unnecessarily i.e. a gallery script taking up bandwidth when there is no actual gallery on the page.

answered Jul 06 '11 at 13:24

giles

624
1
8
21

Sorry I just realised you asked for a "built-in" solution - this doesn't help but the script really is *tiny* (4kb) – giles Jul 06 '11 at 13:26

Is there any way to postpone loading some modules in jQuery and MooTools?

3 Answers3