Hi coothead,
My impression was that matthiasM was new to javascript and would be lost if I changed his code too much. So I only corrected the errors.
As for what you said about replacing the load event with putting scripts immediately before the closing body tag, that does not always yield good results. For instance, if we have a function img_height() containing the line alert(document.getElementById('the_img').clientHeight) for a big image that has id='the_img' and whose height is not specified, then simply putting <script>img_height()</script> at the end of the body section gives '0' or nothing at all if the image hasn't loaded yet by the time the DOM is ready. (Scripts (no onloads) put at the end of the document execute as soon as the DOM is ready, at which stage images might not have finished loading yet. So these scripts might execute too early). Here's an example of how things can go wrong:
Code:
<body>
<!-- stuff -->
<!-- scripts (no onloads) at the end end of body section -->
<script>
/*create a unique image source so that this page works with continued testing, see http://dean.edwards.name/my/busted.html*/
var src = "http://www.nasa.gov/images/content/84857main_EC04-0325-23_lg.jpg?" + Number(new Date);
/*document.write used for demonstration purposes */
document.write("<img id='the_img' src=" + src + " >");
</script>
<script>
function img_height()
{
alert(document.getElementById( 'the_img' ).clientHeight);
}
</script>
<script >
<!-- This fails if the image hasn't finished loading yet when the DOM is ready -->
img_height()
</script>
</body>
In this example, the script at the end of the body section fails. But if we replace <script>img_height()</script> with <script>window.onload=img_height</script>, it gives the correct result.
So there are cases where scripts clearly should not (try to) execute as soon as the DOM is ready, meaning that there are cases where we cannot do without some kind of onload. As we don't always know what sort of things might be still loading when the DOM is already ready (think of complicated layouts, deep DOM structures, dynamic HTML from other scripts, images), it's always safest indeed to put scripts in an onload event in cases of doubt. In this respect, attaching event listeners to onloads must be preferred to simply doing window.onload, because the former method dispenses us from writing special code in the case of multiple onloads. The load event can best be written like this:
Code:
<script>
window.addEventListener('load', function (){img_height()}, false);
</script>
This kind of onloads can be written when and wherever we want them, and we may have lots of them on our page. No worries abouts onloads being overridden by other onloads when event listeners are attached to them.
What goes for load events also applies to resize events. So we can have things like
Code:
<script>
window.addEventListener('resize', function (){img_height()}, false);
</script>
when we want, wherever we want them, and in any number.
I'd like to mention on a side note that certain lines I found in the sources of jQuery.js files make me think that this library uses a method for loading and resizing that is similar to what I explained above. Anyhow, with jQuery too, we can do multiple onloads and onresizes none of which will override the others. We could do, if we wanted:
Code:
<script>
$(window).load(function() {
some_function();
});
</script>
<script>
$(window).load(function() {
some_other_function();
});
</script>
<script>
$(window).resize(function() {
$(window).load();
});
</script>
etc. This would cause some_function() and some_other_function() to execute after page load and when the window is resized, and would be equivalent to:
Code:
<script>
window.addEventListener('load', function(){some_function()}, false);
window.addEventListener('resize', function(){some_function()}, false);
</script>
<script>
window.addEventListener('load', function(){some_other_function()}, false);
window.addEventListener('resize', function(){some_other_function()}, false);
</script>
(Of course, we would write down all of this in a more elegant way, but that's not relevant here).
simple javascript code does not run, no matter what browser
Reply With Quote
Bookmarks