Load JS scripts asynchronously in order (waiting the previous one is complete)

Question

I am trying to use GoogleMaps.InfoBox on my project, but before load this script, the GoogleMaps API has to be loaded.

Right now I have this code to load everything:

/**
 * Load scripts asynchronously
 */
function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key=-MY-KEY-&sensor=true&callback=initialize";
    document.body.appendChild(script);
    var scriptInfoBox = document.createElement("script");
    scriptInfoBox.type = "text/javascript";
    scriptInfoBox.src = "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js";
    document.body.appendChild(scriptInfoBox);
}

But not always the GoogleMaps API is loaded before than GoogleMaps.InfoBox one.

How can I load JS sorted, waiting for complete the previous one?

Have you tried to add `onload` or `addEventListener('load',...)` and load the second script there? — some, Aug 27 '12 at 19:29
I think that is the key: script.onload = loadGoogleMapInfoBox; // function to load. I am going to try — unairoldan, Aug 27 '12 at 19:33
Different browsers behave differently. See [this example](http://stackoverflow.com/questions/1929742/can-script-readystate-be-trusted-to-detect-the-end-of-dynamic-script-loading) — some, Aug 27 '12 at 19:42
using the code of the example works, but throw an exception: Uncaught ReferenceError: done is not defined. Is it normal by crossbrowser compatibility? — unairoldan, Aug 27 '12 at 20:00

score 4 · Accepted Answer · edited May 23 '17 at 10:30

You can use the load event of the scripts:

function loadScript(callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key=-MY-KEY-&sensor=true&callback=initialize";
    document.body.appendChild(script);
    script.onload = function() {
        var scriptInfoBox = document.createElement("script");
        scriptInfoBox.type = "text/javascript";
        scriptInfoBox.src = "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js";
        document.body.appendChild(scriptInfoBox);
        scriptInfoBox.onload = callback;
    };
}

However, you will need to adapt the code a bit to make it crossbrowser-safe like this.

Thanks, I've mentioned it in the answer – Bergi Aug 27 '12 at 19:54 — Bergi, Aug 27 '12 at 19:54

score 0 · Answer 2 · answered Aug 27 '12 at 19:31

0

Just use regular script tags right before </body>.

<script src="http://maps.googleapis.com/maps/api/js?key=-MY-KEY-&sensor=true&callback=initialize"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"></script>

By default, browsers will execute scripts in the order they appear.

answered Aug 27 '12 at 19:31

josh3736

139,160
33
216
263

No, but if the script tags are immediately before the closing `
` tag, it doesn't really matter. Because they are after the rest of your content, they won't block the page from displaying.
– josh3736 Aug 27 '12 at 19:33
yes it does because the interpreter is blocked during the download – yadutaf Aug 27 '12 at 19:35
@jtlebi: It doesn't matter because the HTML parser (which is what is blocked during the download of a ` – josh3736 Aug 27 '12 at 19:52

Load JS scripts asynchronously in order (waiting the previous one is complete)

2 Answers2

Linked