Jquery Cycle + Firefox Squishing Images

J’ai utilisé une solution beaucoup plus simple et plus propre pour résoudre ce problème que ce qui a déjà été proposé:

Avec jQuery, vous devez utiliser $(window).load au lieu de $(document).ready pour votre situation particulière. Pour résoudre le problème, changez ceci:

 $(document).ready(function() { $('#slideshow').cycle({ /* ... */ }); }); 

Pour ça:

 $(window).load(function() { $('#slideshow').cycle({ /* ... */ }); }); 

Pourquoi ça marche? Comme window.onload déclenche une fois que toutes les images référencées sur la page ont été chargées (voir https://developer.mozilla.org/en/DOM/window.onload et .load () – jQuery API ), qui correspond au comportement souhaité dans ta situation. $(document).ready , mieux connu sous le nom de “DOM Ready”, se déclenchera avant le chargement des images. C’est généralement le comportement souhaité, mais dans votre cas, c’est trop tôt.

J’ai eu le même problème quand je travaillais sur un site il y a plusieurs mois (lien ci-dessous). Si vous démarrez cycle dans $(document).ready() , voici ce qui se produit lorsqu’un client accède à votre page:

1) Le navigateur du client envoie une demande pour chaque élément img . Ces demandes prennent des quantités variables de temps à remplir.

2) Avant que les demandes d’image ne soient terminées, le cycle commence. Cycle fonctionne en masquant la totalité, sauf la première image du diaporama: il définit la visibility:hidden et display:none sur chacune de ses images.

Le problème est que Firefox corrige une fois pour toutes la taille de l’élément img au moment où le style d’affichage est défini sur none . Donc, si le chargement de l’image est terminé, ses atsortingbuts de style de hauteur et de largeur sont petits (je ne sais pas exactement à quoi ils correspondent – peut-être la taille de l’espace réservé à l’image de Firefox). Lorsque cycle affiche l’image en définissant son atsortingbut de style sur display:block , il utilise toutes les dimensions dont il disposait au moment où il était masqué.

J’ai résolu ce problème en modifiant mon code afin qu’il ne lance pas le plug-in cycle avant que toutes les images ne soient chargées. Pour ce faire, j’initialise une variable de compteur au nombre d’images que je fais défiler, puis associe un événement de chargement à chaque image comme ceci:

 var imagesRemaining = 12; // 12 is just the number of images in the slideshow div $(document).ready(function() { $('#slideshow > img').bind('load', function(e) { imagesRemaining = imagesRemaining - 1; if (imagesRemaining == 0) { // I'm doing some other stuff when initializing cycle startCycle(); // My images all start with visibility:hidden so they don't show // before cycle hides them in a 'stack', so ... $('#slideshow > img').css('visibility', 'visible'); } }); }); function onBefore(curr, next, opts) { // Your code here ... } function startCycle() { $('#slideshow').cycle({ ... // your initialization here }); } 

Vous pouvez le voir en action en consultant les galeries de ce site dans Firefox. Je construis de manière dynamic les pages de la galerie, donc sa structure est légèrement différente de celle de votre page, mais vous pouvez voir plus de détails si vous fouillez avec Firebug.

J’aimerais également append qu’il semble que l’ajout d’un atsortingbut width et height résout ce problème.

Ok, je sais que c’est probablement un très mauvais moyen d’appeler load, mais je ne peux que lier mon code de cycle à .load pour une raison quelconque. Cela ne fonctionne tout simplement pas, j’ai donc appelé l’initialisateur de cycle dans …

je ne pouvais pas forcer les tailles depuis que je fais du vélo à travers li contenant des images dynamics et des données

son probablement défectueux à un certain point, mais pour ceux aussi désespérés que moi …

Josh, votre solution vient de me sauver un mal de tête, merci beaucoup!

Je pense l’avoir légèrement modifié afin de traiter les pages où vous ne connaissez pas le nombre total d’images. Cela semble bien fonctionner pour moi, si quelqu’un peut voir des défauts, merci de le signaler – j’apprends toujours.

 $(document).ready(function () { $('#slideshow > img').each( function go() { $(this).bind('load', function (e) { projects(); $('#slideshow > img').css('visibility', 'visible'); }); }); }); function projects() { $('#slideshow').cycle({ fx: 'scrollHorz', speed: 300, timeout: 0, next: '#next ', prev: '#prev ', after: onAfter, nowrap: 1, autostop: 1 }); } 

Si vous utilisez une firebase database pour remplir le diaporama, vous pouvez essayer d’accéder aux dimensions de l’image à partir de l’image elle-même.

Par exemple, en utilisant Django, vous pouvez utiliser

  width="{{ xxx.image.width }}px" height="{{ xxx.image.height }}px" 

dans votre tag img.

Vous pouvez utiliser une solution similaire à celle permettant de réactiver des vidéos youtube. Vous devez connaître le rapport largeur / hauteur, et l’append comme fond de rembourrage au div vélo. Pour mes photos 1024X680, j’ai utilisé 680/1024 = 66,4%

Dans ton cas, je crois

#slideshow{ padding-bottom:66.4%; } #slideshow{ padding-bottom:66.4%; } affichera l’image unshrunk. Je n’ai aucune idée des valeurs réelles de hauteur et de largeur sur lesquelles vous travaillez. Substituez donc les vôtres. J’ai dû utiliser cette solution lorsque la solution $ (window) .load s’est avérée inefficace – de sorte que j’utilise maintenant les deux.

C’est mieux que de définir les dimensions de l’image, car elle se glisse dans un environnement fluide et réactif.