У меня была такая же проблема при работе на сайте несколько месяцев назад (ссылка ниже). Если вы запускаете цикл в $(document).ready(), вот что происходит, когда клиент переходит на вашу страницу:
1) Браузер клиента отправляет запрос на каждый элемент img. Эти запросы занимают различное количество времени.
2) Перед выполнением запросов изображения начинается цикл. Цикл работает, скрывая все, кроме первого изображения в слайд-шоу: он устанавливает visibility:hidden и display:none для каждого из своих изображений.
Проблема в том, что Firefox исправляет размер элемента img один раз и для всех в тот момент, когда стиль отображения не установлен . Поэтому, если изображение не завершило загрузку, его атрибуты стиля высоты и ширины невелики (я не уверен, что именно они соответствуют - возможно, размер заполнителя изображения Firefox). Когда цикл показывает изображение, устанавливая его атрибут стиля в display:block, он использует любые размеры, которые он имел в то время, когда он был скрыт.
Я решил эту проблему, изменив мой код, чтобы он не запускал плагин цикла, пока все изображения не будут загружены. Для этого я инициализирую переменную-счетчик числом изображений, которое я повторяю, а затем привязываю событие загрузки к каждому изображению следующим образом:
var imagesRemaining = 12; // 12 is just the number of images in the slideshow div
$(document).ready(function() {
$('#slideshow > img').bind('load', function(e) {
imagesRemaining = imagesRemaining - 1;
if (imagesRemaining == 0) {
// I'm doing some other stuff when initializing cycle
startCycle();
// My images all start with visibility:hidden so they don't show
// before cycle hides them in a 'stack', so ...
$('#slideshow > img').css('visibility', 'visible');
}
});
});
function onBefore(curr, next, opts) { // Your code here ... }
function startCycle() {
$('#slideshow').cycle({ ... // your initialization here });
}
Вы можете увидеть это в действии, просмотрев галереи на этом сайте в Firefox. Я создаю страницы галереи динамически, поэтому она структурирована немного по-другому, чем ваша страница, но вы можете увидеть больше деталей, если возитесь с Firebug.