Webkit мигает текст, который должен быть скрытой загрузки страницы - PullRequest
Новая
       21

Webkit мигает текст, который должен быть скрытой загрузки страницы

0 голосов
/ 21 января 2011

У меня есть несколько элементов, которые я перемещаю из основного контейнера в document.ready и анимирую в использование animate () для window.load

В браузерах webkit текст одного из элементов кратковременно мигает на экране. Он отлично работает в браузерах без webkit.

Вот код: 

      <header>
        <div id="logo">
            <h1 class="ir">Blank Consultants Inc.</h1>
            <a href="index.html"><img src="images/logo.gif" alt="Pro-edge logo" width="258" height="158" /></a>
            <h2 id="tagline">Powerful. Effective. Creative.</h2>
        </div>

        <div id="contact">
            <a id="email" href="mailto:info@blank.com">Email: info@blank.com</a>
            <p id="number">Toll-Free: 5555555</p>
        </div>

        <nav id="nav">
            <a href="/">home</a>
            <a href="/">what we do</a>
            <a href="/">blogs</a>
            <a href="/">cosmo</a>
            <a href="/">team</a>
            <a href="/">contact us</a>
        </nav>

        <div id="header-image" class="clear">
            <img src="images/mainPage.jpg" width="960" height="283" />
        </div>
    </header>

JavaScript: 

$(document).ready(function () {
    $('#logo').css('left', '-455px');
    $('#contact').css('right', '-455px');
    $('nav').css('top', '-180px');

    $(window).bind("load", function () {
        $('nav').animate({ 'top': 0 }, 1200, 'swing');
        $('#logo').animate({ 'left': 0 }, 1250, 'easeOutExpo');
        var x = function () {
            $('#contact').animate({ 'right': 0 }, 1250, 'easeOutExpo');
        };
        setTimeout(x, 170);
    });
});

Я думаю просто использовать CSS3 для этого в webkit, но мне бы очень хотелось знать, что вызывает эту проблему.

Спасибо!

Ответы [ 2 ]

1 голос
/ 21 января 2011

Ваши элементы будут скрыты только после завершения загрузки страницы.
До тех пор они будут видны.

Вы должны поместить Javascript сразу после элементов, а не ждать загрузки страницы.

Вы также можете скрыть элементы, используя CSS, но это сломает ваш сайт для посетителей без Javascript.

0 голосов
/ 21 января 2011

Я подозреваю, что между отображением элементов и запуском скрипта существует небольшая задержка.Вы можете попытаться скрыть элементы в HTML, а затем показать их в javascript при загрузке документа.Это предотвратит эффект мерцания, на который вы ссылаетесь.

...