test

a website

THIS PAGE IS LOADING!

This page has loaded, and here's how I made it work:


<html>
<head><title>test</title>
<style>
   .hid { display: none }
   .loads {
      position: absolute;
      background-color: #fff!important;
      top: 0; left: 0;
      width: 100%;
      height: 10000px;
   }
   .loads h1 { color: #f00; }
</style>
<script>
Lib = {};

// A cross-browser event adder:
Lib.addEvent = function(obj, evType, fn){
    if(obj.addEventListener){ obj.addEventListener(evType, fn, false); return true; }
    else if(obj.attachEvent){ var r = obj.attachEvent("on"+evType, fn); return r; }
    else return false;
}

Lib.addEvent(window, "load", function() {
   document.getElementById("loadMessage").className="hid";
});

</script>
</head>
<body>
<h1>a website</h1>

<div id="loadMessage" class="loads">
<h1>THIS PAGE IS LOADING!</h1>
</div>

<script>
   document.getElementById("loadMessage").className="loads";
</script>
<p>This page has loaded, and here's how I made it work:</p>

<p>The key to all of this is that the loadMessage is by default hidden, we use javascript to initially show it and then add an event to window.onLoad which is only activated once all content - including images - has been downloaded.</p>

</body>
</head>

The key to all of this is that the loadMessage is by default hidden, we use javascript to initially show it and then add an event to window.onLoad which is only activated once all content - including images - has been downloaded.

changed September 17, 2007

Breakfastdinnertea

a website

THIS PAGE IS LOADING!