How to process javascript function called onload in the background?

Question

Hi,

I would like to know if it's possible to process the code in a particular javascript function that is invoked during page onload in the background.

i.e. few labels and textboxes are sent to the browser by the server. During onload, a function gets invoked to immediately hide them. But, I see that because of using it in onload, the textboxes get displayed in the browser first before being hidden (after everything else on the page has been loaded).

Is there a way by which this can be avoided?

Thanks!

Answer 1

If those elements need to be hidden at page load hide them by applying a display: none css style on the server side. Then later when they need to be shown use javascript.

Answer 2

You need to hide those elements either with a JS code placed right after them

<textarea id="a"></textarea>
<script type="text/javscript">
document.getElementById('a').style.display = 'hidden';
</script>

…or (usually better) when the DOM is ready

document.addEventListener('DOMContentLoaded',function(){
    document.getElementById('a').style.display = 'hidden';
},false);

There is a compatibility problem with the second way – IE does not support the addEventListener method and you need to use another code as described here: http://www.javascriptkit.com/dhtmltutors/domready.shtml