How do I load the HTML ans CSS first then run JS

Question

I noticed that JavaScript runs first then loads the page on SoloLearn. I want it the other way around. I tried window.onload and adding a load event listener but, didn't work. Any suggestions?

Answer 1

Try on this post to find the answer,
Read Kirk Schafer 's advice! 👍

https://www.sololearn.com/Discuss/300061/?ref=app

Answer 2

EFFICIENTLY LOAD JAVASCRIPT WITH DEFER AND ASYNC
https://flaviocopes.com/javascript-async-defer/

Before asking a question on the Q/A,
try to search :

 • Google Advenced Search :
Set domain to 》sololearn.com《 for  search only on the SoloLearn
https://www.google.com/advanced_search

  • Eclipse Wiki :
"Before asking a question on the forums"
https://wiki.eclipse.org/Before_asking_a_question_on_the_forums

  • SoloLearn Advanced Search :
http://www.freecodeexamples.com/2018/12/sololearn-advanced-search.html

https://code.sololearn.com/W26q4WtwSP8W/?ref=app

Answer 3

On SL content of js tab is injected like an inline script inside the "final" html page (same for css). In practice you have to considerate html, css and js tabs like pieces that build up a final (and processed) html page
.. See also here
https://code.sololearn.com/WlA8Fx8bl6nI/?ref=app

Answer 4

Ah, I probably could have written that as "here's how HTML/CSS/JS tabs are laid out", visible by adding this to any (preferably blank) code:
setTimeout(function(){alert(document.all[0].outerHTML)}, 150) //setTimeout easier than onload variability

[Babel ES6 trick...change injected [script] tag behavior] Leveraging how the script tag loads, KrOW figured out a nice Babel transpiler trick to get ES6 syntax working:
https://code.sololearn.com/WL4QrKP4we6A/?ref=app

...Try the same alert there to see how it works.

Answer 5

There is no script tag in the head on the playground, so I can't use defer or async, and the JS still runs. I could use the script tag in the body, but I prefer not to, as I want to keep everything organized.