jQuery .cycle() невидим в браузерах Webkit [Safari / Chrome] при первой загрузке (после обновления все работает нормально!)

Я использую цикл jQuery для реализации эффекта слайд-шоу.

Вы можете щелкнуть любое изображение слайд-шоу, чтобы перейти к следующему.

Это отлично работает во всех браузерах. Только в Safari происходит что-то действительно странное. При загрузке первой страницы изображения слайд-шоу вообще не отображаются! После перезагрузки страницы (обновлением или нажатием кнопки «Перейти» рядом с адресной строкой) все работает как надо.

Что здесь происходит? Я делаю что-то неправильно? Как я могу это исправить?

Обновление:

Я использую последние версии как jQuery, так и плагина Cycle. Вот код, который я использую для вызова .cycle():

if (1 < $('.image-list li').size()) {
 $('.image-list').cycle({ fx: 'uncover', speed: 200, timeout: 4000, next: $('.image-list li') }).addClass('image-list-cycle');
}

jquery css safari cycle invisible
person Mathias Bynens    schedule 08.10.2009    source источник
comment
Есть ли какие-либо ошибки или какие-либо другие подсказки, которые могут помочь нам решить вашу проблему?   -  person Jan Hančič    schedule 08.10.2009
comment
Похоже, это происходит и в Google Chrome.   -  person Aistina    schedule 08.10.2009
comment
Спасибо за ваши комментарии. Добавил немного информации в свой пост.   -  person Mathias Bynens    schedule 08.10.2009

Ответы (2)


arrow_upward
3
arrow_downward

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

Мне кажется, что иногда скрипт запускается непосредственно перед загрузкой изображений, и используемые значения ширины/длины для циклического воспроизведения изображений неверны. Я бы посоветовал вам добавить что-то вроде этого на свою страницу (адаптируйте классы и имена к вашим потребностям):

<script type="text/javascript">
  $(document).ready(
    function() {
      $('.image-list li').each(function({$(this).css({
        [SET HERE POSITION, WIDTH, ETC]});});
      $('.image-list').cycle([OPTIONS]);});
</script>
person Roberto Aloi    schedule 08.10.2009
comment
Я жестко запрограммировал высоту и ширину LI в своем CSS, и это помогло. Спасибо! - person Mathias Bynens; 08.10.2009

arrow_upward
8
arrow_downward

Использование $(window).load вместо $(document).ready также помогает.

person Michiel    schedule 18.07.2011
comment
Имеет смысл, так как window.onload срабатывает только после загрузки всех изображений (поэтому их размеры известны). - person Mathias Bynens; 19.07.2011