Порядок инициализации jQuery

Question

Я создаю страницу, на которой я хочу использовать скрипт Galleria (http://devkick.com/lab/galleria/) и jQuery виджет Accordion, чтобы скрыть различные категории миниатюр галереи. В моей инициализации я написал как Предложено в руководствах обоих сценариев:

<script type="text/javascript">
        jQuery(function($) { 
        $('ul.gallery').galleria({
         insert: "#image"
        });

         $("#thumbs").accordion();

        });
</script>

Функция galleria() создает эскизы и присваивает им соответствующие размеры. Затем функция accordion() назначает свои стили и сворачивает невидимые в данный момент элементы. С кодом выше у меня есть проблема с некоторыми миниатюрными изображениями, становящимися невидимыми из-за нулевых размеров.

Если я поставлю оповещения до того, как пиктограммам назначат их размеры в функции galleria(), я могу видеть, что для изображений, которые находятся внутри невидимых страниц аккордеона, их контейнер в этой точке имеет нулевые размеры. Это очень странно для меня, потому что я думал, что эти функции выполняются последовательно и accordion() не вызывается до завершения galleria().

Что еще более странно, если я поставлю предупреждение перед функцией аккордеона, тогда все будет обработано в правильном порядке.

Очевидно, что здесь я нахожусь в состоянии гонки. Почему это происходит и что я должен сделать, чтобы гарантировать упорядоченную последовательность инициализации?

Answer 1

Это всего лишь предположение, но я предполагаю, что это как-то связано со скриптами, запускаемыми до загрузки изображений. Казалось бы, это объясняет, почему функция alert() перед функцией аккордеона заставляет вещи работать. Это дает возможность загружать изображения.

Если это так, вы можете использовать обработчик событий jQuery load(), чтобы обеспечить полную загрузку изображений.

Документы для загрузки (): http://api.jquery.com/load-event/

Answer 2

Я полагаю, что состояние гонки может заключаться в том, что все изображения могут быть еще не загружены после того, как Galleria добавит их. Это заставило бы функцию аккордеона предположить, что изображения равны нулю.

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

Если вы хотите быть уверенным в порядке выполнения, загляните в firebug и console.log вместо использования предупреждений, которые не блокируют выполнение скрипта, как это делает предупреждение.

Что касается вашей основной проблемы, я хотел бы посмотреть, если Galleria предоставляет некоторые функции обратного вызова, чтобы гарантировать, что все изображения загружаются, прежде чем двигаться дальше.