Conflict between onload loadbar and prototype scrollbar

I'm trying to understand this conflict between

My loadingbarscript that hides my content until the page is loaded (Removed the tags from the top)

function showContent(){
     //hide loading status...
     document.getElementById("loading").style.display='none';
     //show content
     document.getElementById("content").style.display='block';
  }
  window.onload = function() {
 showContent(); }
</head>
<body>
<script type="text/javascript">
  document.write('<div id="loading"><img src="ajax-loader.gif"></div>');
</script>
<div id="content">
  <script type="text/javascript">
     //hide content
     document.getElementById("content").style.display='none';
  </script>

And 2. My livepipe scrollbar using prototype 1.6.1 Where the call is this:

  <script type="text/javascript">
      document.observe('dom:loaded',function(){     
        var scrollbar = new Control.ScrollBar('cases_tekst','scrollbar_track');
            });
    </script>

For some reason either one works or they other depending on the order. I had several other windows.onload functions that work with the prototype scrollbar but not this one. Hope to understand better what is turning wrong. No errors show up with firebug. The mistake must have something to do with the onload call because when i resize my browser window the scrollbar works.

Hope someone can explain the cause of the conflict.

Solution

Instead of using window.onload to call showContents, use prototype's Event.observe function. Like this:

Event.observe(window, "load", showContent);

For more info on this function: http://www.prototypejs.org/api/event/observe

For more info on why not to use the window.load event model, check out this site: http://www.quirksmode.org/js/introevents.html

In general, quirksmode.org is a great site for understanding this kind of thing and how they behave in various browsers. That's one of the reasons to use libraries such as prototype or jquery as it standardizes much of the browser's behavior.