onload and Jquery ready(). Do they work on any DOM? such as table or div?

I开发者_StackOverflow need to put a dynamic content on a div using javascript script. This div is on the top of the page so it will load first before other things below it. And there are really lot's of things down there. So, when I put the script on the ready() or onload, the div will be empty for 2 -3 seconds while other things are displayed. So, I tried putting the onload or ready() to this div.

//example div, which is on the header part of the page
<div id="cont1">
something goes here
</div>
//... and there are a lot of other things going down here.

I tried putting the onload="alert('test')" on the div tag

<div id="cont1" onload="alert('test')">

and also the jquery method

<script>
$("cont1").ready(function(){
    alert("test");
});
</script>

Both methods don't work, as the alert is triggered only after the whole page is displayed.

but if I put the alert("test"); script immediately after closing the above div, it works fine (as the other things on the page is not displayed yet when the alert is showing).

<div id="cont1">
something goes here
</div>
<script>
    alert("test");
</script>

But this method is kind of a bad design isn't it? So, any other way to achieve this?

If you want a javascript action to fire after a specific DOM element has loaded, simply place it immediately after the element, as you noted:

<div id="cont1">
something goes here
</div>
<script>
    alert("test");
</script>

Some may disagree, but this is not bad design. As long at whatever occurs in this script pertains only to elements which occur prior to it in the HTML document, everything should be kosher. The DOM is loaded linearly in the order it appears in the document, so there is no case in which the script coming after #cont1 would occur prior to #cont1. If the script is lengthy, you could put it in a function in a header include then call the function there instead.

onload and the meta-event of "ready" apply the the entire DOM document, not just any DOM node, which is what you are attempting here.

I would stick with jQuery's $(document).ready(...) for code that requires the DOM to be present.

onload is unfortunately on the window only.

However, I have written a jQuery plugin called waitForImages that will fire a callback when images have loaded inside any container.

This is a bit half way but you can have a img of a single pixel same color as the background at the end of the div and have an onload on the img.