Javascript运行较晚且有滞后

Question

我正在尝试使用JavaScript在我的网站上播放幻灯片。

这是我的HTML：

<div id="image_slider">
    <img class="active" src="images/slider/slider1.jpg" alt="My image" />
    <img src="images/slider/slider1.jpg" alt="My image" />  
    <img src="images/slider/slider2.jpg" alt="My image" />  
    <img src="images/slider/slider3.jpg" alt="My image" />
    <img src="images/slider/slider4.jpg" alt="My image" />
    <img src="images/slider/slider5.jpg" alt="My image" />      
</div>

这是我的JavaScript：

function cycleImages(){
    var $active = $('#image_slider .active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#image_slider img:first');
    $next.css('z-index',2); //move the next image up the pile
    $active.fadeOut(1000,function(){ //fade out the top image
        $active.css('z-index',1).show().removeClass('active'); //reset the z-index and unhide the image
        $next.css('z-index',3).addClass('active'); //make the next image the top one
   });
}
$(document).ready(function(){
    // run every 3s
    setInterval('cycleImages()', 3000);
})

代码运行良好，但有一个小故障。

页面加载时，第一张图像会在很长一段时间后淡化为第二张图像。当循环重复时，再次看到这种奇怪的行为。

为什么第一张图片出现这种滞后？