Empêcher le formatage incorrect avant l'initialisation de jCousous

Question

Nous venons juste de commencer à utiliser jCousel avec notre application et nous rencontrons un étrange comportement de l'interface utilisateur. Pendant une fraction de seconde avant le rendu de la page, chaque LI qui compose le contenu est affiché étendu sur la page. Une fois jQuery ("# ​​nom-carousel"). Jcarousel(); est exécuté, cependant, la page revient à ce qu'il est censé ressembler. Je suppose que la raison pour laquelle nous voyons ceci dans notre application mais pas sur aucun des exemples est parce que notre contenu est beaucoup plus complexe que celui des exemples sur le site de jCousel et il prend plus de temps pour que les navigateurs rendent le HTML.

J'ai lu ailleurs sur Stack Overflow que cacher les divs dans chaque li ne semble pas fonctionner correctement parce que jCousel ne peut pas déterminer la bonne largeur.

Avant d'essayer de charger dynamiquement jCousousel dans les carrousels, j'aimerais voir si quelqu'un d'autre a eu ce problème et s'il existe des solutions plus faciles.

Answer 1

J'ai fini par corriger cela en chargeant le contenu du carrousel à l'intérieur des LI cachés en bas de la page. Lorsque la page se charge, j'initialiser le carrousel avec un ensemble itemLoadCallback:

itemLoadCallback: {onBeforeAnimation: switchHiddenCarouselParts} 

Dans la fonction itemLoadCallback, ajouter chaque volet caché au carrousel:

carouselLoaded = false; 
function switchHiddenCarouselParts(carousel, state) { 
    if (!carouselLoaded) { 
     panes = ["pane1", "pane2"]; 

     for (i = 0; i < panes.length; i++) { 
     hidden = $("#"+panes[i]); 
     carousel.add((i+1), hidden.html()); 
     hidden.remove(); 
     $("#"+panes[i]).show(); 
     } 
     carouselLoaded = true; 
    } 
}