延遲到完全加載

我的頁面中有一個加載速度非常快的時鐘，但在加載時您可以看到它停止。我想讓它只在完全加載時出現。延遲到完全加載

這是時鐘的代碼：

<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

延遲到完全加載

回答

相關問題