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:
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:
#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;

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;
$length count($imagearray);
        for (
$i 0$i $length$i++) {

Exception $e) {
'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');  
            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) {  
                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');