Load javascript after HTML

Question

What is the easiest way to load the scripts after all the html elements have been loaded?
And on the other hand how to load a script after a particular element has loaded?

ps: please don't mention onload() as I have tried this but it doesn't seem to indicate when an element has loaded but rather when it 'starts' to load (Correct me if I am wrong)

Answer 1

Besides window.onload, insert your loading after page code before the end of the body tag.
ie<script></script></body>

or alternatively,
document.getElementById("blah").addEventListener("load", function) might work...

also, found this on stack overflow... might even be useful to me.
<script src="demo_defer.js" defer></script>
Basically, defer should make the script load after parsing. They got the idea from w3schools, so for notes on it I'd go there,or use Google

Happy coding

Answer 2

try enclosing you javascript within window.onload function:

window.onload=function() {
//your javascript code goes here
}

no need to call the function in html: it is authomatically fired when the whole page is loaded.

Answer 3

@Russel Reeder thx, i found the related w3schools page:
https://www.w3schools.com/tags/att_script_defer.asp
Looks interesting, and the script should load faster than with window.onload. https://stackoverflow.com/questions/27300058/window-onload-vs-script-defer

Answer 4

@Russel Reeder wrote:

<< Besides window.onload, insert your loading after page code before the end of the body tag.
ie<script></script></body>

or alternatively,
document.getElementById("blah").addEventListener("load", function) might work... >>

Scripts are loaded (and immediatly parsing), as any external ressources, in order of their appearance in the Html code... so you're rigth by telling to put <script> tags at end of body will load them later as possible. But you're wrong in your alternative: you cannot use DOM API while all Html is parsed, or only for already declared and closed nodes when the script node is ran.

Anyway, the sooner event to be fired when DOM is ready to be accessed id the 'DOMContentLoaded' of the 'document' object (wich is necessatly ready when any script ran, as the 'window' root objects):

document.addEventListener("DOMContentLoaded", function() { /* initialization */ } );

or:

function myFunc() { /* initialization */ }
document.addEventListener("DOMContentLoaded", myFunc); // don't use reserved keyword for function name ;P

@Mamex86 wrote:

<< ps: please don't mention onload() as I have tried this but it doesn't seem to indicate when an element has loaded but rather when it 'starts' to load (Correct me if I am wrong) >>

No, 'load' event is fired when load of targeted element is completly done ;)

Answer 5

I just tried out the defer method, works good for me

Answer 6

I'm still learning too, but as I understand it, after images and css are loaded

Answer 7

Pls note that Promise.defer() is obsolete and it doesn't work in Firefox and Safari. (Still works in chrome but is deprecated).
https://developer.mozilla.org/en-US/docs/Mozilla/JavaScript_code_modules/Promise.jsm/Deferred

Answer 8

Ahaha, @seamiki I said defer method earlier, but it is the defer attribute... not sure that's the same at all.. could be tho, still the concept works in codeplayground

Answer 9

@Russel Reeder Thanks I had thought putting my scripts at the end of body. Works fine but looks cumbersome for large code.
I like the idea of defer. Will try it

Answer 10

@Russel Reeder you said earlier that the script will load 'after parsing'. please explain what that means ?