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().

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().

• javascript
• jquery
• dom

Share Improve this question Follow edited Jul 1, 2009 at 18:27 Matt Goddard asked Jul 1, 2009 at 17:38 Matt GoddardMatt Goddard 90911 gold badge88 silver badges1919 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

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.

That's what the <noscript> tag is there for.

<noscript>This site works better with Javascript enabled.</noscript>

It will only display the contents if scripting is disabled.If Javascript is enabled, the contents will not be displayed. That sounds like exactly the behavior you are looking for.

The elementReady jQuery plugin lets you run code as soon as an element loads. Especially useful for dynamically loaded elements. (I wrote this plugin.)

Try using document ready event instead of Load event as Load event may take time to fire even though DOM may have been loaded.

And if you are really desperate, try this:

<div id="divToHide">

</div>

<script>document.getElementById('divToHide').style.display = 'none';</script>

If browser sees a script tag like above, it will run the JavaScript right away.

Instead of page load, use $(document).ready(). It runs after the DOM is loaded, but before the page contents are loaded.

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

I was going to suggest something like the following, but I don't think it will work:

<noscript>
  <style type="text/css">
     div.myblock { display: visible; }
  </style>
</noscript>