How can I check execute some javascript after my DOM is loaded and after another js has finished loading?

Question

I am using the javascript Placeholders.js Once my page is loaded it says that should execute the script as below:

Placeholders.init({ live: true, //Apply to future and modified elements too hideOnFocus: true //Hide the placeholder when the element receives focus });

I am NOT using jQuery. How can I know when to execute the init because it depends on two things: The Placeholders.js script having loaded and my form fields having loaded.

Something like http://stackoverflow.com/a/1207005/464744? – Blender Jan 10 '13 at 08:05 — Blender, Jan 10 '13 at 08:05

score 1 · Accepted Answer · answered Jan 10 '13 at 08:06

How can I know when to execute the init because it depends on two things: The Placeholders.js script having loaded and my form fields having loaded.

Put the script tag doing the Placeholders.init call at the bottom of the document, just before your closing </body> tag. All of the elements above it are accessible at that point.

Example:

<body>
  <input id="theField" value="value from HTML" type="text">
  <script>
    document.getElementById("theField").value =
      "value from JavaScript";
  </script>
</body>

Live Copy | Source

The result is that the field has the text "value from JavaScript". Reliably, cross-browser.

References:

score -1 · Answer 2 · answered Jan 10 '13 at 08:14

You can check it like this:

if (document.readyState === 'complete') {
    // insert your code here
}

The enclosed in the 'if' statement above will not run until the document has been fully loaded. In jQuery you can do it like this:

$(document).ready(function() { // insert code here });

How can I check execute some javascript after my DOM is loaded and after another js has finished loading?

2 Answers2