Finding the exact moment when an element appears in the DOM

Question

Is it possible to determine the exact moment the element exists in the DOM when the page loads?

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

I would like to hide the element as soon as it is written to the DOM, but I do not know how to do this or even if it is possible. I do not want to use set display: hidden because I want the panel to display if JavaScript is not available.

TIA

Matt

Editorial: I use jQuery - and my code is executed from $ (document) .ready ().

Answer 1

Place javascript immediately after the element, which minimizes the time during which the element can be visible:

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

The script will run at page load time as soon as the final script tag has been processed.

Answer 2

What is the <noscript> ?

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

It displays content only if scripts are disabled. If Javascript is enabled, the content will not be displayed. This is similar to what you are looking for.

Answer 3

elementReady jQuery plugin allows you to run code immediately after loading an element. Especially useful for dynamically loaded elements. (I wrote this plugin.)

Answer 4

Try using the document ready event instead of the load event, as the load event may take some time, even if the DOM can be loaded.

And if you are really desperate, try the following:

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

If the browser sees the script tag as described above, it will immediately launch JavaScript.

Answer 5

Instead of loading the page, use $ (document) .ready (). It starts after loading the DOM, but before loading the contents of the page.

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

Answer 6

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

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