2012-02-14 24 views
1

我正在使用Jquery循环插件在一系列div与使用background-size="cover"属性确定大小的背景图像之间转换。在每次转换之后,我给可见幻灯片一个使用css3在一段文本中转换的活动类。直到最近,这在几乎所有现代浏览器中都能运行数月,Chrome 17似乎是它不想使用的唯一一个。当您转到幻灯片但背景图像是空白时,图像上的文本仍然显示。这个问题并不是每次都会发生,但是会在大约4/5页面加载时发生。这让我觉得它可能与images/script加载的速度有关。有趣的是,图像和一切都在那里,但只有当你去检查员窗口并点击'element.style'属性复选框之一时才会出现。Chrome17中使用Jquery循环插件消失的图像

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

例子:blindbarber.vaesite.com

$( '#幻灯片')周期({

  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

我就遇到了这个问题,以及 - 看起来像一个修复将在下一版Chrome中发布 http://code.google.com/p/chromium/issues/detail?id=111218#makechanges

edi T: 所以我想出了一个解决方法,就是运行这个功能在之前的过渡回调

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

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

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

} 

它看起来像你运行你自己的,但基本上解封,然后回来设置背景图片诀窍