addClass更改bg-image但在第一次加载时没有闪烁

Question

我正在每个键盘上运行一个函数来监控文本字段。

根据输入，我使用jquery到.removeClass("classwithBGImage").addClass("classwithnewBGimage")

这很好用，期望在第一次加载时背景图像中有一个闪烁。

我尝试使用Javascript和CSS预加载图像，甚至尝试使用精灵 - 但是当.removeClass("classwithBGImage").addClass("classwithnewBGimage")被触发时，第一次加载时总会出现闪烁。

更新： 似乎是一个记录的chrome bug： http://code.google.com/p/chromium/issues/detail?id=102706

正如在这个jsfiddle中所见：http://jsfiddle.net/QpvUQ/2/

有什么想法吗？非常感激。

Answer 1

将背景图片应用于绝对定位的div和left:-99999px。

#preload{
   background-image : url(large-image.png);
   position:absolute;
   left:-99999px;
}

稍后，将其用于实际的div

.classwithnewBGimage{
  background-image : url(large-image.png);
}

这是我所知道的用于预加载图像的黑客攻击之一，以便在您实际使用它们时不会花费时间。

---

另外，没有参数的.removeClass()什么都不做。为了避免闪烁使用平滑过渡。

.stylesWithoutImage{
 ///
}

.classwithnewBGimage{
//img
}

Answer 2

使用Move.js可以动画CSS更改。

move('.box')
  .set('background-image', 'url(img)')
  .end();

PS：没试过，但它说你可以用它为CSS制作动画。

Answer 3

我只使用CSS执行了一个与jsfiddle相同的实现。

它如何运作？

.class {
  background: url(...);
}

.class:hover {
  background: url(...);
}

如果您需要使用Javascript，我会离开JS代码，但只应该使用CSS。

http://jsfiddle.net/QpvUQ/7/

Answer 4

我已经找出了问题，以防其他人遇到同样的问题。

通过预加载，图像被预加载，但许多浏览器仍然会收到图像的304响应，导致第一次加载时出现闪烁。您可以强制浏览器使用rails应用程序缓存图像。

Enable image caching in development mode in Rails 3.1