Предотвращение неправильного форматирования до инициализации jCarousel

Мы только начали использовать jCarousel с нашим приложением и столкнулись со странным поведением пользовательского интерфейса. За долю секунды до отображения страницы каждый LI, из которого состоит контент, отображается на странице в развернутом виде. Как только jQuery("#carousel-name").jcarousel(); выполняется, однако страница возвращается к тому, на что она должна быть похожа.

Я предполагаю, что причина, по которой мы видим это в нашем приложении, но не в примерах, заключается в том, что наш контент намного сложнее, чем у примеров на сайте jCarousel, и браузерам требуется больше времени для отображения HTML.

В другом месте в Stack Overflow я читал, что скрытие div в каждом li работает неправильно, потому что jCarousel не может определить правильную ширину.

Прежде чем я попытаюсь позволить jCarousel динамически загружать элементы карусели, я хотел бы узнать, сталкивался ли кто-нибудь еще с этой проблемой и есть ли какие-либо более простые решения.


javascript jquery jcarousel
person Chris Williams    schedule 01.09.2009    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В итоге я исправил это, загрузив содержимое карусели внутри скрытых LI внизу страницы. Когда страница загружается, я инициализирую карусель набором itemLoadCallback:

itemLoadCallback: {onBeforeAnimation: switchHiddenCarouselParts}

В функции itemLoadCallback я добавляю каждую скрытую панель в карусель:

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;
   }
}
person Chris Williams    schedule 22.10.2009