title: Delay until fully loaded
body: <p>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.</p>
  
  <p>This is the code of the clock:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      * {
          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;
          }
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
      $(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 );
      }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks</p>