jQuery .cycle() est invisible dans les navigateurs Webkit [Safari/Chrome] au premier chargement (après l'actualisation tout fonctionne bien!)

Question

J'utilise jQuery cycle pour implémenter un effet de diaporama.

Vous pouvez cliquer sur n'importe quelle image du diaporama pour passer au suivant.

Cela fonctionne très bien dans tous les navigateurs. Seulement dans Safari, quelque chose de vraiment bizarre arrive. Lors du chargement de la première page, aucune image du diaporama n'est affichée! Après avoir rechargé la page (en la rafraîchissant ou en cliquant sur le bouton 'Go' à côté de la barre d'adresse), tout fonctionne comme il se doit.

Que se passe-t-il ici? Est-ce que je fais quelque chose de mal? Comment puis-je réparer cela?

---

Mise à jour:

Je suis en utilisant les dernières versions des deux jQuery et le plugin Cycle. Voici le code que je utilise pour invoquer .cycle():

if (1 < $('.image-list li').size()) { 
$('.image-list').cycle({ fx: 'uncover', speed: 200, timeout: 4000, next: $('.image-list li') }).addClass('image-list-cycle'); 
} 

Answer 1

Si vous google juste pour cette erreur, vous trouverez beaucoup de personnes ayant des problèmes avec le plugin jQuery appliqué aux images. Les problèmes se produisent généralement en termes de position et d'affichage. J'ai l'impression que parfois le script s'exécute juste avant le chargement des images et que les valeurs de largeur/longueur utilisées pour faire défiler les images sont fausses. Je vous suggère d'ajouter quelque chose comme ceci à votre page (adaptez les classes et les noms à vos besoins):

<script type="text/javascript"> 
    $(document).ready(
    function() { 
     $('.image-list li').each(function({$(this).css({ 
     [SET HERE POSITION, WIDTH, ETC]});}); 
     $('.image-list').cycle([OPTIONS]);}); 
</script> 

Answer 2

En utilisant $(window).load au lieu de $(document).ready semble aussi aider.