Как предварительно загрузить изображения для слайдера Orbit Foundation?

Question

Используя Zurb's Foundation 4.1.5 (последняя версия), слайдер изображений Orbit отлично работает. К сожалению, это выглядит действительно первые пару секунд, когда все изображения отображаются в виде гигантского маркированного списка. Затем включается JavaScript, и все это прекрасно.

Как мне избежать первоначального безобразия? Могу ли я предварительно загрузить изображения? Могу ли я иметь все с display: none или же visibility: hidden пока не готово?

Answer 1

На основную документацию

Мы выяснили, как инициализируется Orbit, добавив функцию-обертку, которая останавливает уродливую флэш-память нестандартного содержимого. Вот необходимая разметка:

Чтобы добавить предварительный загрузчик, просто включите div class="preloader" прямо в оболочку, например так:

<div class="slideshow-wrapper">
      <div class="preloader"></div>
      <ul data-orbit>
        <!-- Orbit slides -->
      </ul>
    </div>

Обновление протестировано: протестировано с Foundation 4.2.1 http://foundation.zurb.com/download.php

Используется Fiddler для регулирования скорости загрузки http://fiddler2.com/