在 Chrome17 中使用 Jquery Cycle 插件消失的图像答案

【问题标题】：Disappearing Images with Jquery Cycle Plugin in Chrome17在 Chrome17 中使用 Jquery Cycle 插件消失的图像
【发布时间】：2012-03-13 15:44:05
【问题描述】：

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

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

示例：blindbarber.vaesite.com

$('#slideshow').cycle({

 寻呼机: '#pagination',
     适合：1，
     fx: '淡入淡出',
     速度：500，
     超时：0，
     下一个：'#下一个'，
     上一个：'#prev'，
     updateActivePagerLink: 函数更新(pager, activeIndex) {
         $(pager).find('a:eq('+activeIndex+')').addClass('activeSlide').siblings().removeClass('activeSlide');
         移动页面（）；
     },
     之前：函数（）{
       $(".active").removeClass('active')
       $('.slide').css({"position": "absolute"});
     },
     之后：函数（）{
       $(this).addClass('active');
        $('.slide').css({"position": "absolute"});
     }
  });

 函数 movePager() {
   var move = $(".activeSlide").offset();
    $("#active-slider").animate({'left': move.left }, 500 );
   }
 });

【问题讨论】：

标签： jquery google-chrome jquery-cycle css

【解决方案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);

}

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

【讨论】：