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>

所以基本上它会淡入，然后 Pikachoose 启动。但是当页面加载时，淡入淡出有明显的滞后。它有效，但有点不稳定。一旦加载，幻灯片就可以正常工作了。有没有办法稍微延迟淡入，直到整个页面加载，这样它就不会被束缚？我认为这就是就绪函数所完成的任务。

您认为为什么会发生这种情况？有什么想法吗？谢谢。

---

编辑

这是完整的代码：

<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 准备好时触发，而不是在页面加载时触发。

在页面加载之前，使用动画时您可能会得到不想要的结果，因为您想要设置动画的元素的宽度/高度等属性可能仍然未知。此外，pikachoose 使用的图像可能仍未完全加载。

所以你最好使用 $(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>