CODEWITHSUNDEEP
javascriptjqueryhtml
Sebastien Lorber
Sebastien Lorber

Reputation: 92140

Loading Javascript files sequentially in <body> and fire callback on completion

I have an weebsite (Cordova/Phonegap app actually) that currently has in <head>:

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="appPolyfills.js"></script>
<script type="text/javascript" src="appLibs.js"></script>
<script type="text/javascript" src="app.js"></script>

This works fine, but actually the website scripts are quite heavy, so while the scripts are parsed, the html of the page is actually not displayed.

I want the HTML of the page to be displayed, and only then load the scripts above.

I know I can load the scripts in the <body> tag, but in my case I must absolutly load these scripts sequentially.

So basically what I want is:

Is this possible?

I can accept a JQuery based solution but prefer raw javascript.

Upvotes: 2

Views: 795

Answers (2)

Armin Bleiholder
Armin Bleiholder

Reputation: 72

you can put the script-tags after the body and you can place an own script after the included scripts

...
</body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="appPolyfills.js"></script>
<script type="text/javascript" src="appLibs.js"></script>
<script type="text/javascript" src="app.js"></script>
<script>
    starttheapp();   // call function when "app.js" is ready
</script>
</html>

Upvotes: 2

youssef mohamed
youssef mohamed

Reputation: 45

You can use defer in your tag to delay loading this script after the body is loaded or use async to load while loading the body

<script defer="defer" type="text/javascript" src="cordova.js"></script>
<script defer="defer" type="text/javascript" src="appPolyfills.js"></script>
<script defer="defer" type="text/javascript" src="appLibs.js"></script>
<script defer="defer" type="text/javascript" src="app.js"></script>

Upvotes: 0

Related Questions