Utilisation de jQuery Cycle et ajax pour créer dynamiquement un diaporama - les images ne se chargent pas immédiatement

J'essaie actuellement de créer une boîte de navigation de diaporama simple et bon marché pour un client (quelque chose dans le genre de ce que dit, par exemple, Red Sox ou Gamespot utilisent sur leurs sites, mais loin, beaucoup plus simple). Jusqu'à présent, il se déroule bien, avec un problème - les images n'apparaissent pas lors d'une première visite. Ils n'apparaissent qu'après le rechargement de la page. Je pense que cela peut être une sorte de problème d'exécution, ou peut-être un problème de cache, mais je ne suis pas sûr de savoir comment y remédier. Mon code:Utilisation de jQuery Cycle et ajax pour créer dynamiquement un diaporama - les images ne se chargent pas immédiatement

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 je peux avoir besoin de retarder le moment de la fonction du cycle, ou peut-être forcer en quelque sorte à 'voir' les images la première fois à travers. Je ne suis pas sûr de savoir comment le faire.

Source

2010-08-04 Major Productions

Depuis que j'ai écrit la réponse originale, je trouve que le même problème se produisait même avec le délai d'attente. J'ai parlé au développeur du plugin sur les forums jQuery, et son exemple de travail utilisait $ .getJSON plutôt que $ .get. Je suis passé à cela, et cela a fonctionné parfaitement. Je peux seulement supposer qu'il y a une légère différence subtile entre la façon dont $ .getJSON analyse les données et comment je le fais avec l'invocation manuelle de la fonction d'analyse. Qu'il s'agisse d'un problème de code réel ou d'un problème de timing lorsque l'analyse est effectué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>

Source

2010-08-10 11:44:12

Une idée de comment le faire fonctionner avec un get régulier? Voilà ce que je me sers:

$.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 qui est retourné par ajax est un groupe d'images, ainsi que certains contenus de texte.

Source

2010-08-10 05:59:58 broken45

Vous devriez probablement poster cela comme une question distincte. En outre, plus de détails sont nécessaires - que voulez-vous dire par «groupe d'images»? Noms de fichiers? Données d'image réelles? Et quelle partie ne fonctionne pas? Les images sont-elles chargées? Ne pas charger? –

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

Votre appel n'est pas compris dans un document.ready (même si votre code JavaScript est au fond de la page) - ceci pourrait ne pas être le problème ... juste une pensée.

dire créer une fonction pour maintenir votre chargement et faites un:
```
$(document).ready(function(){ 
    loadImages(); 
    startSlideShow(); 
}); 
```
L'autre chose pourrait être que la première charge, les images ne sont pas téléchargées sur votre navigateur. Vous pouvez faire une vérification pour voir si toutes les images ont fini de charger (utiliser un compteur et être chargées sur toutes les images, etc.) avant d'afficher le composant du cycle. Cela pourrait le réparer pour Chrome.

Note: Le intégré .each est beaucoup plus rapide qu'une façon boucle "for". (Spécialement pour IE et de nombreux articles ...)

Par exemple:

$(newImages).each(function(){ 
    $('#slideshow').append($(this)); 
});

Source

2010-08-10 06:43:35 Corpsekicker

En ce qui concerne 1, je ne pense pas qu'avoir le script en bas ferait une différence, car tout ce que j'ai lu suggère que c'est la même chose que d'attendre le chargement du DOM. Je suis toujours à la recherche, cependant, car vous n'êtes pas la première personne à me dire d'utiliser .ready() même avec le script en bas. Bon conseil avec .each(). Je suis toujours un novice jQuery, donc je n'ai pas pensé à l'utiliser. –

Utilisation de jQuery Cycle et ajax pour créer dynamiquement un diaporama - les images ne se chargent pas immédiatement

Répondre

Questions connexes