2

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:

  • Make the HTML display immediately on startup before loading any script
  • Load the scripts sequentially in body
  • Be notified when the last script (app.js) is loaded, so that I can start the app (as the document ready event has already fired, I need another one)

Is this possible?

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

Sebastien Lorber
  • 89,644
  • 67
  • 288
  • 419
  • completion callback is `ready` – Tushar Jul 23 '15 at 14:02
  • This answer might help you http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup (See `async` and `defer` part). – Eric Martinez Jul 23 '15 at 14:09
  • why can't you just place your script tags at the bottom of your html body and register a window.onload handler to start your application after the page has loaded completely including all resources like scripts ? – André R. Jul 23 '15 at 14:09
  • @AndréR I don't think putting the ` – Sebastien Lorber Jul 23 '15 at 14:16
  • @EricMartinez ... very good post to read ! – André R. Jul 23 '15 at 14:16
  • 1
    @SebastienLorber ... the browser will execute all scripts in the order they appear in the document. (see the Stackoverflow link Eric Martinez posted) . So placing the scripts at the bottom of the body should work. But i like the comment EricMartinez posted. Using 'defer' should solve your problem and increase performance at the same time. – André R. Jul 23 '15 at 14:20

2 Answers2

2

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>
Armin Bleiholder
  • 72
  • 4
0

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>
youssef mohamed
  • 45
  • 3