javascript - Delay until fully loaded - Stack Overflow

admin管理员组

文章数量:1393900

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

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

• javascript
• fadein
• show

Share Improve this question Follow edited Apr 25, 2011 at 6:34 lisovaccaro asked Apr 25, 2011 at 5:36 lisovaccarolisovaccaro 34k9999 gold badges271271 silver badges423423 bronze badges 3

• onload is not a valid attribute for div, it won't do anything. You can try body onload perhaps with setTimeout, but it will still be a guessing game how long it exactly takes to load... – No Results Found Commented Apr 25, 2011 at 5:44
• show the plete code for the clock. Perhaps it can be speeded up. Also you can inline document.write a pleted clock so it already has the correct time when it shows. – mplungjan Commented Apr 25, 2011 at 5:59
• I posted the full clock code. How can I do that? Thanks – lisovaccaro Commented Apr 25, 2011 at 6:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

<ul id="clock" style="visibility: hidden">  <!-- this is so the browser putes 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.

本文标签： javascriptDelay until fully loadedStack Overflow