Javascript fadeIn使用$（document.ready（），导致明显的延迟

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

$（文档）.ready（函数（）{
$（“#幻灯片放映”）.hide（）.fadeIn（1500）；
$（“#pikame”）.PikaChoose（）；
});

所以基本上它会消失，然后Pikachoose启动。但是当页面加载时，fadein上有一个明显的延迟。它能工作，但有点起伏。一旦加载，幻灯片就可以正常工作。有没有办法稍微延迟fadeIn，直到整个页面加载，这样它就不会被占用？我认为这就是ready函数所完成的

你认为这是为什么？有什么想法吗？谢谢

---

编辑

以下是完整的代码：

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

$（文档）.ready（函数（）{
$（“#幻灯片放映”）.hide（）.fadeIn（1500）；
$（“#pikame”）.PikaChoose（）；
});

$。就绪将在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>

//向html元素添加一个类，以便能够应用
//如果启用了JS，则使用不同的样式
$（'html'）.addClass（'js_on'）；
$（窗口）。加载（函数（）{
$（'幻灯片'）.fadeIn（1500）；
$（“#pikame”）.PikaChoose（）；
});
/*启用JS时最初隐藏#幻灯片放映*/
html.js#幻灯片{显示：无；}

您可以将

.PikaChoose（）

行放入for

.fadeIn（）

中，这样它在

.fadeIn（）完成后才会运行。您最好使用CSS来隐藏
#slideshow
元素，而不是jQuery。首先，我将使用CSS而不是jQuery来隐藏#slideshow div，并完全删除.hide（）函数。然后，如果将淡入淡出的时间减少到25秒以下会发生什么？我在.fadeIn（）的回调处理程序中调用了函数中的.PikaChoose（）行，但它没有显示任何内容，然后PikaChoose幻灯片突然出现在屏幕上，并开始正常运行。这是否意味着我的原始代码实际上首先快速加载Pikachoose幻灯片，隐藏它，然后淡入图像（Pikachoose幻灯片必须先加载，以便幻灯片的第一个图像淡入）？我明白你们对删除.hide（）的看法，但现在我正努力弄清楚到底发生了什么。我已经在上面添加了完整的代码。非常感谢。@Scott上面详述的
fadeIn（）
效果的持续时间是1.5秒（1500毫秒）。@MxmastaMills可能发生的事情是您的
PikaChoose（）
函数正在加载幻灯片，并使用jQuery的
fadeIn（）
函数在tandom中操作DOM，当两个函数争夺DOM时，会产生明显的波动。首先调用
PikaChoose（）
，在成功完成后只调用
fadeIn（）
。啊，太棒了！谢谢我还是比较新的，所以我仍然在学习如何加载页面和函数的功能。帮了大忙。