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启动。但是当页面加载时，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准备就绪时触发，而不是在页面加载时触发。

在加载页面之前，使用动画时可能会得到不希望的结果，因为您想要制作动画的元素的宽度/高度等属性可能仍然未知。此外，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>

fadeIn使用$（document）.ready（）导致明显滞后

1 个答案: