jquery - Javascript runs late and has a lag -

i trying run slideshow on website using javascript.

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

here 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 next image pile     $active.fadeout(1000,function(){ //fade out top image         $active.css('z-index',1).show().removeclass('active'); //reset z-index , unhide image         $next.css('z-index',3).addclass('active'); //make next image top 1    }); } $(document).ready(function(){     // run every 3s     setinterval('cycleimages()', 3000); }) 

the code runs glitch.

when page loads, first image fades off second image after long time. strange behaviour seen again when loop repeated.

why there lag first image?