Delay with Cycle and image info obtained via ajax

Delay with Cycle and image info obtained via ajax

I'm attempting to make a little slide show navigation box..thing, along the lines of what a lot of sports sites and, say, Gamespot use (digression: do these boxes have a technical name?). 

My setup is pretty simple - I have a small PHP script that iterates over an image folder and pulls both the file name and last modified info from each image and stores them in an associative array.  The array is json_encode()-ed.  My jQuery $.get()'s the json, parses it, and then creates image elements based on the info.  Cycle then does its thing and creates the slide show.

It all works, with one problem - the images don't appear upon a first visit to the site.  They only appear on subsequent visits.  This happens in the big three browsers (IE, FF, Chrome) without fail.  A refresh is always necessary.

I'm not sure if it's a runtime issue, a cache issue, or if somehow Cycle isn't 'seeing' the images the first time.  Please help.  My code is below:

PHP:

  1. if (isset($_GET['start']) && "true" === $_GET['start'])
    {
        $images 
    = array();

        

    if ($dir = dir('images'))
        
    {
            
    //$count = 0;

            

    while(false !== ($file = $dir->read()))
            
    {
                
    if (!is_dir($file) && $file !== '.' && $file !== '..' && (substr($file, -3) === 'jpg' || substr($file, -3) === 'png' || substr($file, -3) === 'gif'))
                
    {
                    $lastModified 
    = filemtime("{$dir->path}/$file");
                    $images
    [$lastModified] = $file;
                    
    //$images["image$count"] = $file;
                    
    //++$count;
                
    }
            
    }

            echo json_encode

    ($images);
        
    }
        
    else { echo "Could not open directory"; }
    }


HTML and jQuery:

  1. <html lang="en-us">
        
    <head>
            
    <title>jQuery Cycle test</title>
            
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
            
    <script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
            
    <style>
                
    #slideshow a { margin: 0; padding: 0; color: #fff; }
            
    </style>
        
    </head>

        

    <body>
            
    <div id="slideshow">
            
    </div>
        
    </body>

        

    <script type="text/javascript">
            $
    .get('slideshow.php', {start : "true"}, function(data){
                
    var images = JSON.parse(data);

                

    for(var image in images){
                    $
    ('#slideshow').append('<a href="images/' + images[image] + '"><img src="images/' + images[image] + '" alt="" /></a>');
                
    }

                $

    ('#slideshow').cycle({
                    fx
    : 'cover',
                    direction
    : 'right',
                    timeout
    : 3000,
                    speed
    : 300
                
    });
            
    });
        
    </script>


    </html>