jquery - 在 Chrome17 中使用 Jquery Cycle 插件消失图像

Question

我正在使用 Jquery Cycle 插件在一系列带有背景图像的 div 之间转换，这些背景图像的大小使用 background-size="cover" 属性。每次转换后，我都会为可见幻灯片提供一个事件类，该类使用 css3 在一段文本中进行转换。这在每个现代浏览器中都有效了几个月，直到最近，Chrome 17 似乎是唯一不想在其中工作的浏览器。当您转到幻灯片时，图像上的文本仍然出现，但背景图像是空白的。该问题并非每次都会发生，但会在大约 4/5 页面加载时发生。这让我觉得这可能与 images/script 加载的速度有关。有趣的是，图像和所有内容都在那里，但只有当您转到检查器窗口并单击“element.style”属性复选框之一时才会出现。

这是我的代码和网址。任何帮助将不胜感激。

示例:blindbarber.vaesite.com


$('#slideshow').cycle({





     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 );
   }
 });

Answer 1

我也遇到了这个问题 - 看起来会在下一个 chrome 版本中修复 http://code.google.com/p/chromium/issues/detail?id=111218#makechanges

编辑:所以我想出一个解决办法，就是运行这个函数作为转换前的回调

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

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

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

}  

看起来你在运行自己的，但基本上取消设置，然后设置背景图像就可以了