延迟至满载

Question

我的页面中有一个时钟，加载速度非常快，但在加载时您可以看到它停止的瞬间。我想让它仅在完全加载时出现。

这是时钟的代码：

<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>

谢谢

Answer 1

<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>

然后：

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

</script>

Answer 2

div 没有 load 事件。

在 DOM 准备好后，我将隐藏时钟...

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

...然后在时钟代码的末尾，当它完成时，我将其显示设置为 block...

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

。 ..或者 inline 如果这更适合您的情况。