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

}

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

在Chrome17中使用Jquery循环插件消失图像

1 个答案: