Блог

Главная - Вопросы по программированию - Задержка до полной загрузки

Задержка до полной загрузки

#javascript #fadein #show

#javascript #fadein #показать

Вопрос:

На моей странице есть часы, которые загружаются довольно быстро, но в тот момент, когда они загружаются, вы можете видеть, что они остановились. Я хочу, чтобы он отображался только при полной загрузке.

Это код часов:

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

Спасибо

Комментарии:

1. onload недопустимый атрибут для div , он ничего не сделает. Вы можете попробовать body, onload возможно, с помощью setTimeout , но все равно это будет игра в угадайку, сколько времени точно потребуется для загрузки…

2. показать полный код для часов. Возможно, это можно ускорить. Также вы можете встроить document.напишите завершенные часы, чтобы у них уже было правильное время, когда они отображаются.

3. Я опубликовал полный код синхронизации. Как я могу это сделать? Спасибо

Ответ №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>

Ответ №2:

У div нет load события.

В DOM ready я бы скрыл часы…

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

… и затем в конце кода часов, когда он будет завершен, я бы установил его отображение на block …

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

…или inline если это более уместно в вашей ситуации.