How to load 2 Javascript files async and run one after another?

You could dynamically add your scripts, in that way they are loaded asynchronously by default.

To ensure an ordered execution you could mark them explicitly as not async.

Here is a minimum example:

<html>
    <head>
        <script>
            [
                'https://code.jquery.com/jquery-1.11.3.min.js',
                '1.js'
            ].forEach(function(src) {
                var script = document.createElement('script');
                script.src = src;
                script.async = false;
                document.head.appendChild(script);
            });
        </script>
    </head>
    <body>

    </body>
</html>

The File 1.js contains jquery code:

$("body").append("<div>It works</div>");

In this example the files are loaded asynchrounously but keep the specified order. For further reading you can have a look at: http://www.html5rocks.com/en/tutorials/speed/script-loading/

Tags:

Javascript

Html

Asynchronous

Recent Posts