fadeIn使用$(document).ready( )导致明显滞后

Question

我对javascript还比较陌生，并且正在构建一个网页。我正在使用Pikachoose幻灯片作为页面上的横幅，我找不到方法让它在加载时淡入。当页面加载时，幻灯片的第一个图像只是直接加载而不是消失。

我决定在整个幻灯片中只使用一个fadeIn javascript函数。这是我的javascript：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pikachoose.js"></script>
<script language="javascript">
    $(document).ready(function (){
        $('#slideshow').hide().fadeIn(1500);
        $("#pikame").PikaChoose();
    });
</script>

基本上，它消失了，然后皮卡霍斯就开始了。但是，当页面加载时，fadein会出现明显的滞后。很管用，但有点颠簸。一旦加载幻灯片，幻灯片就会正常工作，不会出现任何问题。有没有办法将fadeIn稍微推迟到整个页面加载，这样它就不会被捆绑了？不过，我认为这就是就绪功能所完成的。

你觉得这是为什么？有什么想法吗？谢谢。

编辑

下面是完整的代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pikachoose.js"></script>
<script language="javascript">
    $(document).ready(function (){
            $('#slideshow').hide().fadeIn(1500);
            $("#pikame").PikaChoose();
    });
</script>
<script type="text/javascript" src="js/jquery.pikachoose.js"></script>
<div id="slideshow">
    <ul id="pikame" >
        <li><a href="http://www.pikachoose.com"><img src="slideshow/purplebackground.png"/></a></li>
        <li><a href="http://www.pikachoose.com"><img src="slideshow/redbackground.png"/></a></li>
        <li><a href="http://www.pikachoose.com"><img src="slideshow/yellowbackground.png"/></a></li>
</ul>
</div>

Answer 1

$.ready将在DOM准备就绪时触发，而不是在加载页面时触发。

在加载页面之前，您在使用动画时可能会得到不希望得到的结果，因为您喜欢动画的元素的宽度/高度等属性可能仍然未知。此外，皮卡霍斯所使用的图像可能仍未被完全加载。

因此，最好使用$(window).load()来执行您的函数。

若要在加载页之前隐藏幻灯片，可以使用以下命令：

<script type="text/javascript">
  //add a class to the html-element to be able to apply
  //a different style if JS is enabled
    $('html').addClass('js_on');


    $(window).load(function (){
        $('#slideshow').fadeIn(1500);
        $("#pikame").PikaChoose();
    });
</script>

<style type="text/css">
 /* initially hide #slideshow when JS is enabled */
   html.js_on #slideshow{display:none;} 
</style>