À l'aide de jQuery Cycle et ajax pour créer dynamiquement un diaporama des images n'ont pas de charge immédiatement

Je suis en train d'essayer de faire un pas cher, simple, diaporama zone de navigation pour un client (quelque chose le long des lignes de ce que, disons, les Red Sox ou Gamespot les utiliser sur leurs sites, mais beaucoup, beaucoup plus simple). Jusqu'à présent, c'est effectivement très bien, avec un problème - les images n'apparaissent pas lors d'une première visite. Ils n'apparaissent qu'après la page est rechargée. Je pense que c'est peut-être une sorte de runtime question, ou peut-être un problème de cache, mais je ne suis pas sûr de la façon de le résoudre. Mon code:

PHP:

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 et JavaScript:

<!doctype html>
<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>

Je pense que j'ai peut-être besoin de retarder le moment du cycle de la fonction, ou peut-être en quelque sorte le forcer à "voir" les images de la première fois. Je ne suis pas sûr de savoir comment faire.

OriginalL'auteur Major Productions | 2010-08-04

  1. 2

    Il y a deux raisons possibles (ou plus) que je suis absent) qu'il pourrait être le chargement bizarrement:

    1. Votre appel n'est pas compris dans un document.ready (même si votre code JavaScript est au bas de la page) - ce n'est pas la question... juste une pensée.

      c'est à dire créer une fonction pour maintenir votre chargement et de faire un:

      $(document).ready(function(){
    loadImages();
    startSlideShow();
});

    2. L'autre chose qui pourrait être fait que sur la première charge, les images n'avez pas téléchargé de votre navigateur. Vous pourriez faire une vérification pour voir si toutes les images ont fini de se charger (utiliser un compteur et isloaded sur toutes les images, etc.) avant de vous montrer le cycle de la composante. Cela pourrait résoudre le problème pour google Chrome.

    Note:
    Le haut- .each est de façon plus rapide qu'un "for" en boucle. (spécialement pour IE et de nombreux objets...)

    Par exemple:

    $(newImages).each(function(){
    $('#slideshow').append($(this));
});
    Concernant le 1, je ne pense pas que le fait d'avoir le script en bas serait de faire une différence, que tout ce que j'ai lu suggère que c'est la même chose que d'attente pour les DOM à charger. Je suis toujours à la recherche, cependant, que vous n'êtes pas la première personne à me dire à utiliser .ready (), même avec le script en bas. Bon conseil avec .chacun(). Je suis encore un débutant jQuery, donc il n'a pas eu lieu pour moi de l'utiliser.

    OriginalL'auteur Corpsekicker

  2. 1

    Depuis que j'ai écrit l'original de la réponse, j'ai trouvé que le même problème est survenu, même avec le délai d'attente. J'ai parlé avec le développeur du plugin sur le jQuery forums, et son travail à titre d'exemple $.getJSON plutôt que de $.obtenir. Je suis passé à ça, et cela a fonctionné parfaitement. Je peux seulement supposer qu'il y a un peu légère, subtile différence entre la façon dont $.getJSON analyse de données et la façon dont je le faisais avec le manuel de l'invocation de la fonction d'analyse. Si c'est un vrai code de question ou de problème de synchronisation lors de l'analyse syntaxique est réalisée reste un mystère.

    Ma solution:

    <!doctype html>
<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; display: block; }
            img { width: 305px; height: 278px; }
        </style>
    </head>

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

    <script type="text/javascript">     
        $.getJSON('slideshow.php', function(images){
            for(var i = 0; i < images.length; ++i){
                $('#slideshow').append('<a href="images/' + images[i]['src'] + '"><img src="images/' + images[i]['src'] + '" alt="" /></a>');
            }

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

</html>

    OriginalL'auteur Major Productions

  3. 1

    Aucune idée de comment le faire fonctionner avec une brosse à obtenir? C'est ce que j'utilise: 

        $.get(loadUrl, { id: id },
     function(data){
          $('#loader').remove();
             window.scrollTo(0,0);
          $('#display').html(data);             
          startCycle();
          });

function startCycle() {
     //trigger cycle
     $('.images').cycle({
          fx:     'fade',
          speed:  500,
          timeout: 0,
          pager: '#sub-nav .root',
          prev: "#sub-nav .prev",
          next: "#sub-nav .next",
          before: onAfter
      });

     $("#sub-nav a:first").addClass("first");
} //start cycle

    Le contenu retourné par ajax est un groupe d'images, ainsi qu'un peu de texte contenu.

    Vous devriez probablement poste comme une question distincte. Aussi, plus de détails sont nécessaires - qu'entendez-vous par "groupe d'images"? Les noms de fichiers? Données réelles de l'image? Et ce n'est pas de travail? Les images de chargement? Pas de chargement?

    OriginalL'auteur broken45