hello everybody,
I have used a jquery plugin called cycle, that turns a list of images in a slideshow. I use PHP to dynamically create the image list, and the plugin makes it into a slideshow. All fine. The thing is, that the first cycle of slides show a flicker in between the slides. I now have 11 images to illustrate, and the slideshow shows 11 flickers, and then the slideshow operates as should, with instant slide changes!
the example can be viewed here:
samweerdmeester[dot]nl/slideshow2/
refresh for the flickering example, and then notice how the second cycle works fine. I made the background of the container red to make the flicker behaviour more visible.

What is going on? I tried everything, Why can't I get this thing to behave as should right away?

All the code can be found in de source of the example page, and the cycle plugin is from jquery[dot]malsup[dot]com/cycle/

hope to get some advice, this is driving me crazy..
the essence of the code can be found here too:

PHP Code:
<head>
<style>
#myslides {
    position: absolute;
    top:  100;    
    left: 100;
    width: 640px;    
    height: 400px;    
    cursor: none;    
    padding: 0;    
    margin:  0 auto;
    list-style-type: none;    
}     
#myslides li {
    background-color: red;
    top:  100;    
    left: 100;
    display: none;
    cursor: none;
    border:  0px solid rgb(100,100,100);
       width: 640px;    
    height: 400px;
        
}

#myslides li.first {
display: block;
}
</style>    
</head>

<?php
$directory 
'images/slideshow/';     
try {        
    
// Styling for images    
    
echo "<ul id=\"myslides\" >";    
    
    
    foreach ( new 
DirectoryIterator($directory) as $item ) {            
        if (
$item->isFile()) {
                    
$path "".$directory.$item."";
                    
$imgpath "<li data-cycle-image=\"".$path."\"></li>";
                    
$imagearray[] = $imgpath;
    }}
        
sort($imagearray);
        
$length count($imagearray);
        for (
$i 0$i $length$i++) {
        print 
$imagearray[$i];
        }

echo 
"</ul>";
}    
catch(
Exception $e) {
    echo 
'No images found for this slideshow.<br />';    
}
?>


<script type="text/javascript">  
$(document).ready(function() {  
    
$('#myslides li:first').css('background', 'url(' + $(this).attr('data-cycle-image') + ') center center no-repeat').removeAttr('data-cycle-image');  
    $('#myslides').cycle({  
        
            fx: 'none', 
            speed:  700,
            timeout: 10,
            
        before: function(currSlideElement, nextSlideElement) { // Lazy loading of images  
            var data_cycle_image = $(nextSlideElement).attr('data-cycle-image');  
            if (typeof data_cycle_image !== 'undefined' && data_cycle_image !== false) {  
                $('#myslides').cycle('pause');  
                var enlarge_preload = new Image();  
                enlarge_preload.src = data_cycle_image;  
                enlarge_preload.onload = function() {  
                    $(nextSlideElement).css('background', 'url(' + enlarge_preload.src + ') center center no-repeat').removeAttr('data-cycle-image');  
                    $('#myslides').cycle('resume');  
                }  
            }  
        }  
    });  
});  
</script>
<body>
</body>
</html>