我有一个奇怪的问题。它仅在Chrome 24(AFAIK)上发生,因此它可能一个Chrome错误,但如果不是,我希望将来证明我的脚本。
我有一个full screen CSS3 gallery的库。现在我的库很庞大,过于复杂,如果配置了它,它有许多奇特的功能,比如CSS3 fadeouts(默认情况下是jQuery)。现在jQuery过渡就像(笨拙地)CSS3过渡一样正常。问题仅在于CSS3过渡加载的第一个图像。
我花了最后两个小时来隔离问题,我发现了它。问题是.removeClass('fadeout')
过早发生。我无法完全理解为什么会发生这种情况,但我唯一可能的解释是当图库触发时.removeClass('fadeout')
没有加载CSS。这似乎完全不真实,因为浏览器首先加载CSS然后它开始加载jQuery并且在jQuery准备就绪后它加载我的库库,然后当它准备就绪时,我加载启动库的函数并启动加载第一个的过程图像。
所以,不要再拖延,这就是导致问题的代码:
self.backgroundDiv.css(self.transitionClass).on(self.transitionType, stopRunning).removeClass('fadeout')
解释 - self.backgroundDiv
包含保存背景图像的div的jQuery容器。 .css(self.transitionClass)
在该div上添加了转换:
{-moz-transition: "1000ms", -o-transition: "1000ms", -webkit-transition: "1000ms", transition: "1000ms"}
.on(self.transitionType, stopRunning)
绑定特定于浏览器的转换结束事件以触发一个函数,该函数告诉库第一个图像已加载。
所以现在我已经调查了所有弄清楚他们是否从webkitTransitionEnd
事件中删除了浏览器前缀并逐字逐行地添加第一张图像并且一切正常。所以我留下的就是这个淡出的课程,当我尝试的时候,我无法相信它就是它。
我怎么知道这是问题所在?导致上述情况无效,但这使其完美运行:
window.aaa = self.backgroundDiv.css(self.transitionClass).on(self.transitionType, stopRunning);
setTimeout("window.aaa.removeClass('fadeout')", 0);
所以我的问题是 - .removeClass
怎么可能过早发生以及如何解决(除了丑陋的setTimeout)?无论如何我可以检查何时加载CSS?
谢谢!