Delay until fully loaded

There's a clock in my page that loads pretty fast but there's an instant when it loads where you can see it stopped. I want to make it appear only when it's fully loaded.

This is the code of the clock:

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #clock {
        position: relative;
        width: 500px;
        height: 480px;
        background: url(images/clockface.png);
        list-style: none;
        }

    #sec, #min, #hour {
        position: absolute;
        width: 30px;
        height: 600px;
        top: 0px;
        left: 225px;
        }

    #sec {
        background: url(images/sechand.png);
        z-index: 3;
        }

    #min {
        background: url(images/minhand.png);
        z-index: 2;
        }

    #hour {
        background: url(images/hourhand.png);
        z-index: 1;
        }

    p {
        text-align: center; 
        padding: 10px 0 0 0;
   开发者_开发百科     }
</style>

<script type="text/javascript">
    $(document).ready(function() {
          setInterval( function() {
          var seconds = new Date().getSeconds();
          var sdegree = seconds * 6;
          var srotate = "rotate(" + sdegree + "deg)";
          $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
          }, 1000 );
          setInterval( function() {
          var hours = new Date().getHours();
          var mins = new Date().getMinutes();
          var hdegree = hours * 30 + (mins / 2);
          var hrotate = "rotate(" + hdegree + "deg)";
          $("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate}); 
          }, 1000 );
          setInterval( function() {
          var mins = new Date().getMinutes();
          var mdegree = mins * 6;
          var mrotate = "rotate(" + mdegree + "deg)";
          $("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate}); 
          }, 1000 );
    }); 
</script>

Thanks

---

<ul id="clock" style="visibility: hidden">  <!-- this is so the browser computes the position of the element but doesn't show it just yet -->
    <li id="sec"></li>
    <li id="hour"></li>
    <li id="min"></li>
</ul>

Then:

<script type="text/javascript">
    window.onload = function() { // this will be run when the whole page is loaded
        document.getElementById("clock").style.visibility = "display";
    };

</script>

---

A div does not have a load event.

On DOM ready, I would hide the clock...

document.getElementById("clock").style.display = 'none';

...and then at the end of the code of the clock, when it is finished, I would set its display to block...

document.getElementById("clock").style.display = 'block';

...or inline if that is more appropriate in your situation.