延迟到完全加载

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

这是时钟的代码：

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

感谢

来源

2011-04-25 lisovaccaro

'onload'不是'div'有效的属性，它不会做任何事情。你可以用[setTimeout]（https://developer.mozilla.org/en/window.setTimeout）试试''onload'，但它仍然是一个猜谜游戏，它需要多长时间才能加载... – 2011-04-25 05:44:06

显示时钟的完整代码。也许它可以加速。你也可以嵌入文件。写一个完整的时钟，以便它显示时已经有正确的时间。 – mplungjan 2011-04-25 05:59:54

我发布了完整的时钟代码。我怎样才能做到这一点？谢谢 – lisovaccaro 2011-04-25 06:35:15

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

来源

2011-04-25 05:59:37 CarlosZ

一个div没有一个load事件。

在DOM准备好了，我就躲在钟...

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

...然后在时钟的代码结束，在结束时，我将设置其显示器block ...

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

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

来源

2011-04-25 05:45:38 alex

延迟到完全加载

回答

相关问题