How to tell JavaScript to execute a function after an element has been loaded?

Question

How to tell JavaScript to execute a function after an element has been loaded w/out any external library?
Normally I have to bring the <script> tag after the element itself to work with DOM calls.

Answer 1

If you don't want to wait for the full page to load you can also poll for the element's existence:

function myFunc() {
  if (document.getElementById('myElement')) {
    // do stuff
  } else {
    setTimeout(myFunc, 15);
  }
}

Answer 2

Well you can utilize the document.onload and window.onload methods
For example:

window.onload = function(){
   //do some stuff 
}

Answer 3

Putting your script just above the body tag is a valid option. If the element in question supports it, you can also use it's onload event. You could also attach to the onload event of the window or document.

Answer 4

Another option is adding <img src="" onerror="callback()"> after the element and execute codes on onerror event:

 function func(img) { console.log("Element loaded"); img.parentNode.removeChild(img); document.getElementById('hello').innerHTML = "Just loaded"; }

 <p id="hello">Not loaded yet</p> <img onerror="func(this)" src="" style="display:none">