的Webkit闪烁文字是应该被隐藏页面加载

问题描述：

我有我搬出主容器上的document.ready和window.load的Webkit闪烁文字是应该被隐藏页面加载

使用动画（）在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:[email protected]">Email: [email protected]</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中，但我真的很想知道是什么导致了这问题。

谢谢！

这也会发生在连接速度较慢的其他浏览器中。 – SLaks 2011-01-21 03:44:31

答

只有在页面完成加载后才会隐藏您的元素。
在此之前，它们将可见。

你应该把Javascript放在元素后面，而不是等待页面加载。

你也可以使用CSS来隐藏元素，但是这会让你的网站在没有Javascript的情况下破坏你的网站。

我认为，因为我把代码放在$（document）.ready（）中，它应该在页面加载之前隐藏元素？另外，“将JS放在元素后面”是什么意思？谢谢！ – 2011-01-21 04:31:52

答

我怀疑元素显示时间和脚本运行时间有短暂的延迟。您可以尝试隐藏HTML中的元素，然后在文档加载时在JavaScript中显示它们。这将防止您所指的闪烁效果。

的Webkit闪烁文字是应该被隐藏页面加载

相关推荐