Question

Is it possible to detect the exact moment an element exists in the DOM on page load?

Context: On page load i hide an element of my page using jQuery (i.e. If JavaScript is available i want to hide the div) but on poor internet connection you see the panel for a second or so before it disappears.

I’d like to hide the element as soon as it’s written to the DOM but i don’t know how to do this or even if it’s possible. I don’t want to apply set display:hidden because i want to the panel to appear if JavaScript isn’t available.

TIA

Matt

Revision: I’m using jQuery – and my code in executed from within $(document).ready().

Answer 1

Put the javascript right after the element, that will minimise the time that the element may be visible:

<div id="CrouchingTiger">HiddenDragon</div>
<script type="text/javascript">
document.getElementById('CrouchingTiger').style.display = 'none';
</script>

The script will run while the page is loading, as soon as the end tag of the script has been parsed.