jQuery Girl
  1. jQuery Girl
  3. Utilisation de jQuery Cycle et ajax pour créer dynamicment un diaporama – les images ne se chargent pas immédiatement
Intereting Posts
Puis-je appeler une fonction après le chargement d’un iframe ajouté par jquery? Jquery autocomplete – HTML personnalisé pour la liste des résultats Faire que jqGrid remplisse son conteneur Déclenche uniquement certaines règles d’une zone de texte lors de la validation de formulaire avec l’événement keyup et annule l’événement pour le rest Pourquoi jQuery ne fonctionne pas sur mon ordinateur local (local)? Cliquez sur Développer la largeur de la zone de texte Fenêtres modales et reliure / déblocage jquery ie8 get text value = L’object ne prend pas en charge cette propriété ou cette méthode Comment mettre à jour ac: forEach en utilisant Ajax dans le projet Spring? Comment obtenir un jeton d’access à partir de l’URL Jquery: Afficher / masquer le menu avec un seul bouton Erreur ‘impossible d’appeler des méthodes sur une info-bulle avant l’initialisation’ lorsque j’ajoute la bibliothèque jquery-ui jQuery se retrouver Sélection de frères et sœurs adjacents sans nœuds de texte intermédiaires css () et l’opacité .. suite à fadeIn () ne fonctionne pas

Utilisation de jQuery Cycle et ajax pour créer dynamicment 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 (par exemple, l’utilisation des Red Sox ou de Gamespot sur leurs sites, mais beaucoup plus simple). Jusqu’ici, tout va 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 sais pas comment 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: 

    jQuery Cycle test    #slideshow a { margin: 0; padding: 0; color: #fff; }    
 
   $.get('slideshow.php', {start : "true"}, function(data){ var images = JSON.parse(data); for(var image in images){ $('#slideshow').append(''); } $('#slideshow').cycle({ fx: 'cover', direction: 'right', timeout: 3000, speed: 300 }); });

Je pense que je devrais peut-être retarder le chronométrage de la fonction de cycle, ou peut-être le forcer de «voir» les images du premier coup. Je ne suis pas sûr de savoir comment le faire.

Il y a deux raisons possibles (ou plus que je manque) que le chargement pourrait être étrange:

  1. Votre appel n’est pas inclus dans un document.ready (même si votre code JavaScript est au bas de la page) – cela pourrait ne pas être la question … juste une pensée.

    c’est à dire créer une fonction pour contenir votre chargement et faire un: 

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

  2. L’autre chose pourrait être que lors du premier chargement, les images n’ont pas été téléchargées sur votre navigateur. Vous pouvez vérifier si le chargement de toutes les images est terminé (utilisez un compteur et est chargé sur toutes les images, etc.) avant d’afficher le composant de cycle. Cela pourrait résoudre le problème pour Chrome.

Remarque: Le .each est beaucoup plus rapide qu’une boucle ” for “. (spécialement pour IE et de nombreux articles …)

Par exemple: 

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

Depuis que j’ai écrit la réponse originale, j’ai constaté que le même problème se produisait même avec le délai d’attente. J’ai parlé au développeur du plug-in sur les forums jQuery et son exemple de travail utilisait $ .getJSON plutôt que $ .get. Je suis passé à cela et cela a parfaitement fonctionné. Je ne peux que supposer qu’il existe une légère différence subtile entre la façon dont $ .getJSON parsing les données et celle que je procédais avec l’invocation manuelle de la fonction d’parsing. Qu’il s’agisse d’un problème de code ou d’un problème de synchronisation du moment où l’parsing est effectuée rest un mystère.

Ma solution: 

    jQuery Cycle test

Une idée de comment le faire fonctionner avec un habitué? C’est ce que j’utilise: 

  $.get(loadUrl, { id: id }, function(data){ $('#loader').remove(); window.scrollTo(0,0); $('#display').html(data); startCycle(); }); function startCycle() { //sortinggger 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 renvoyé par ajax est un groupe d’images, ainsi que du contenu textuel.