Исчезающие изображения с плагином Jquery Cycle в Chrome17 - PullRequest
1 голос
/ 14 февраля 2012

Я использую плагин Jquery Cycle для перехода между сериями div с фоновым изображением, размер которого определяется с помощью атрибута background-size="cover".После каждого перехода я даю видимому слайду активный класс, который переходит в фрагмент текста с помощью css3.До недавнего времени это работало месяцами в каждом современном браузере. Похоже, что Chrome 17 - единственный, в котором он не хочет работать. Текст на изображении все еще появляется, когда вы переходите на слайд, но фоновое изображение остается пустым.Проблема возникает не каждый раз, а примерно при 4/5 загрузках страницы.Это заставляет меня думать, что это может быть связано со скоростью, с которой images/script загружается в.Самое смешное, что изображения и все есть, но будут появляться только в том случае, если вы войдете в окно инспектора и нажмете один из флажков атрибута 'element.style'.

Вот мой код и URL.Любая помощь будет принята с благодарностью.

Пример: blindbarber.vaesite.com

$('#slideshow').cycle({ </p> <pre> pager: '#pagination', fit: 1, fx: 'fade', speed: 500, timeout: 0, next: '#next', prev: '#prev', updateActivePagerLink: function update(pager, activeIndex) { $(pager).find('a:eq('+activeIndex+')').addClass('activeSlide').siblings().removeClass('activeSlide'); movePager(); }, before: function() { $(".active").removeClass('active') $('.slide').css({"position": "absolute"}); }, after: function() { $(this).addClass('active'); $('.slide').css({"position": "absolute"}); } }); function movePager() { var move = $(".activeSlide").offset(); $("#active-slider").animate({'left': move.left }, 500 ); } });

1 Ответ

1 голос
/ 23 февраля 2012

Я тоже столкнулся с этой проблемой - похоже, исправление будет в следующей версии Chrome http://code.google.com/p/chromium/issues/detail?id=111218#makechanges

edit: Итак, что я выяснил для исправления, так эточтобы запустить эту функцию в качестве обратного вызова перед переходом

function chromeFix( currSlideElement, nextSlideElement, options, forwardFlag ) {

  var self = $( nextSlideElement );
  var src = self.css('backgroundImage');

  self.css('backgroundImage', '').css('backgroundImage', src);

}  

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

...