How to use jQuery to load a module when completed?

Question

When a page is finished loading. Then I want to load a module other, smaller, inside it using jQuery. What should I do?

Answer 1

It sounds like you want to use $.getScript(url)

Answer 2

If you want to wait for the every asset to finish loading, then do something like this:

$(window).load(function(){
    $.getScript('/path/to/file.js');
});

You can also use an optional callback method:

$(window).load(function(){
    $.getScript('/path/to/file.js', function(){
        //Called when script is loaded
    });
});

jQuery docs for $.getScript()

Just to be clear, $(window).load() fires when everything on the page has finished loading including other scripts and images. $(document).ready() fires as soon as the DOM can be manipulated, which is often much sooner than $(window).load().

Answer 3

$(function() { $.getScript(url) });