36

I'm using a JavaScript upload script that says to run the initialize function as soon as the DOM is ready. I currently have it working just fine with either a call to the function with body.onload or directly after the function is defined. The function builds some HTML in a placeholder div that acts as the file uploader tool.

My question is what is the best practice here? Since it works for now, why would the instructions say to run the init function as soon as the DOM is ready? Should I be adding a <script> tag directly after the placeholder DIV for example?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
miahelf
  • 784
  • 1
  • 7
  • 13

8 Answers8

69
<script>
    window.addEventListener("DOMContentLoaded", function() {
        // do stuff
    }, false);
</script>

You do that so you know all the parsed elements are available in the DOM etc.

Shadow2531
  • 11,980
  • 5
  • 35
  • 48
7

The DOM is usually ready before onLoad runs. onLoad only runs after everything loads - external scripts, images, stylesheets, etc.

But the DOM, i.e. the HTML structure is ready before that. If you run the code at the bottom of the page (or after the parts of the page the script works with) that will work fine as well.

Ariel
  • 25,995
  • 5
  • 59
  • 69
7

The easiest solution is using jQuery and its $(document).ready(function() { .... }); function. Instead of .... you put your own code.

Note that it basically does the same thing @Shadow2531 suggested, but also works in old browsers not supporting that event.

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
  • **To be fair**: @ThiefMaster suggested *"the easiest solution"*, and that's arguably true. But *best practice* it is not. – caiosm1005 Jul 15 '13 at 19:10
  • 2
    It's "the easiest solution" if jQuery is already being used on the page or is readily available and not overkill. A really good answer would have been a combination of how to do it with jQuery and how to do it with standard browser code, as given in the [answer below](/a/7992381/543738) by [@Shadow2531](/users/1697). – Mr. Lance E Sloan Aug 31 '17 at 23:53
6

In 2015 you have two options with modern browsers:

document.onload

  • this fires when the document is loaded, but other resources (most notably images) have not necessarily finished loading.

window.onload

  • this fires when the document is loaded, AND all other resources (again, most notably images) are loaded.

Both of the above events would be better utilized with window.addEventListener() of course, as multiple listeners would be allowed.

Robert D
  • 1,878
  • 15
  • 19
3

You could also just move the <script> to the bottom of your page like this:

<html>
<body>
    <main></main>
    <script>
        // code
    </script>
</body>
</html>
agiopnl
  • 1,190
  • 9
  • 18
2

Get jQuery and use the following code.

$(document).ready(function(){
    // Do stuff
});
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
2

As you probably know you should not run init functions before the DOM is fully loaded.

The reason you must run the init function as soon as the DOM is ready, is that once the page has loaded the user starts hitting buttons etc. You have to minimize the small inavoidable gap where the page is loaded and the init-functions haven't run yet. If this gap gets too big (ie. too long time) your user might experience inappropiate behaviour... (ie. your upload will not work).

Other users have provided fine examples of how to call the init function, so I will not repeat it here... ;)

Alex
  • 2,011
  • 3
  • 21
  • 27
-3
var Tette = 
{
    init: function()
    {
/* Your HTML code */
    }
};
Core.start(Tette);

You can try in this code, registering "Core.start(your object)" on the last line of the script. This is a way to load in safety your functions after the DOM loading.

Luca Scandroglio
  • 171
  • 1
  • 6