Проблема с плагином JQuery Cycle, браузерами Webkit и изображениями - PullRequest
Новая
       16

Проблема с плагином JQuery Cycle, браузерами Webkit и изображениями

0 голосов
/ 06 августа 2011

Я пытаюсь создать анимированный баннер, используя JQuery, а не использовать анимированный GIF.Плагин Cycle хорошо выполняет это в FireFox, но в Safari и Chrome при начальной загрузке страницы я не наблюдаю «слайд-шоу» и вижу только одно изображение.Я попытался решить эту проблему с помощью .load (), предварительно загрузив изображения и используя display: hidden на последующих изображениях, каждое безуспешно.Любопытно, что я заметил, что одно загружаемое изображение на самом деле является наименьшим (по размеру файла) изображением из всех изображений.

Любой ввод приветствуется.Я в тупике. 

jQuery(document).ready(function() {
    $('#banner').cycle({
         fx: 'none',
     delay: 0,
     speed: 500,
     autostop: true,
         autostopCount: 8,
timeoutFn: function(currElement, nextElement, opts, isForward) {
          opts.myTimeoutCount = (opts.myTimeoutCount + 1) % opts.myTimeouts.length;
          return opts.myTimeouts[opts.myTimeoutCount];
    },
    myTimeouts: [1000,1000,500,500,500,2000,2000,1000],
    myTimeoutCount: 0
    });
});


<div id="banner">
    <img src="images/if_300x250_banner_1.gif" width="300" height="250" />
    <img src="images/if_300x250_banner_2.gif" width="300" height="250" />
    <img src="images/if_300x250_banner_3.gif" width="300" height="250" />
    <img src="images/if_300x250_banner_4.gif" width="300" height="250" />
    <img src="images/if_300x250_banner_5.gif" width="300" height="250" />
    <img src="images/if_300x250_banner_6.gif" width="300" height="250" />
    <img src="images/if_300x250_banner_7.gif" width="300" height="250" />
    <img src="images/if_300x250_banner_8.gif" width="300" height="250" />

1 Ответ

1 голос
/ 06 августа 2011

Стойкость окупается. Оказалось, что проблема была не в JQuery, Cycle Plugin или браузерах Webkit, а в изображениях. Исходный PSD, который я использовал для создания gif-файлов, содержал слои Photoshop на временной шкале анимации, и эти данные включались, когда я использовал «Сохранить для Web и устройств» в Photoshop - интересно, что это не создавало проблем в Firefox. Решением было просто «Удалить анимацию» в палитре «Анимация» и снова сохранить картинки.

Спасибо всем, кто задумался над этим.

...