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

Question

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

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

这工作得很好，预计在第一次加载时背景图像会闪烁。

我已经尝试使用 Javascript 和 CSS 预加载图像，甚至尝试使用 sprite - 但是当 .removeClass("classwithBGImage").addClass("classwithnewBGimage")被触发。

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

正如在这个 jsfiddle 中看到的:http://jsfiddle.net/QpvUQ/2/

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

Answer 1

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

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

稍后，将其用于实际的 div

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

这是我所知道的预加载图像的黑客之一，这样当您实际使用它们时就不会占用时间。

---

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

.stylesWithoutImage{
 ///
}

.classwithnewBGimage{
//img
}