jQuery.Cycle смещает изображения при определенных обновлениях

Мне трудно понять, что заставляет мой скрипт jQuery правильно загружаться при первой загрузке (нажатие навигационной ссылки), но затем происходит сбой при нажатии «обновить» в браузере.

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

Слайд-шоу в действии можно посмотреть здесь. Вы сможете воспроизвести ошибку, обновив страницу, а затем нажав синюю ссылку «резиденция тибурона» в навигации. (Скриншоты: http://imgur.com/a/z2hki)

http://dev.christinerode.com/garyhutton/tiburon.html

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

Используя плагин jquery.cycle, но не могу найти других случаев этого. Что происходит в javascript для запуска разных отображений одного и того же кода?


jquery jquery-plugins jquery-cycle
person Christine    schedule 13.05.2012    source источник
comment
Это не единственный случай. Другая ошибка заключается в том, что если кто-то быстро нажимает кнопку «Далее», это происходит!   -  person Roko C. Buljan    schedule 14.05.2012
comment
И мне даже не нужно нажимать на тибурон, это дело случая: Попробуйте пару раз нажать CTRL+F5 - в 1/3 случаев заливка позиционирования не удалась.   -  person Roko C. Buljan    schedule 14.05.2012

Ответы (1)


arrow_upward
0
arrow_downward

Несколько предложений:

поместите ВСЕ ваши скрипты перед тегом </body>. Таким образом, вы убедитесь, что документ загружен до измерения размеров элементов DOM:

  <script> // jquery // </script>
  <script> // cycle.plugin </script>
  <script> // your jQ functions // </script>

</body>

Затем вы можете добавить оператор if, чтобы проверить, анимирован ли ваш слайд, чтобы предотвратить клики во время анимации галереи:

$("#slide_prev").click(function(){
   if( !($('.slideshow img').is(':animated') ) ){
      $('.slideshow').cycle("previous");
   }
});
$("#slide_next").click(function(){
   if( !($('.slideshow img').is(':animated') ) ){
      $('.slideshow').cycle("next");
   }
});

Это предотвратит проблему в моем комментарии к вашему Вопросу.

Если у вас все еще есть ошибки (что я не предлагаю, но вы можете попробовать):

$(window).load(function(){
    // your functions
});
person Roko C. Buljan    schedule 13.05.2012
comment
Спасибо, Роко! Перемещение всего javascript прямо перед тегом ‹/body›, к сожалению, не сработало. Однако упаковка всего в $(window).load(function(){, похоже, работала отлично. Что плохого в том, чтобы просто так держать? Какими могут быть другие решения? - person Christine; 14.05.2012