addClass，它更改bg图像，但在第一次加载时没有闪烁

addClass that changes bg-image but without a flicker on first load

本文关键字：加载 第一次 闪烁 bg 图像 addClass      更新时间：2023-09-26

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

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

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

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

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

正如本文所述：http://jsfiddle.net/QpvUQ/2/

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

将背景图像应用于绝对定位的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
}

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

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

PS：没有尝试过，但它说你可以用它来动画CSS。

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

它是如何工作的

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

如果你需要使用Javascript，我留下了JS代码，但只需要CSS就可以了。

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

我已经解决了这个问题，以防其他人遇到同样的问题。

通过预加载，图像被预加载，但许多浏览器仍然接收到对图像的304响应，从而在第一次加载时引起闪烁。在使用rails应用程序的情况下，可以强制浏览器缓存图像。

在Rails 3.1 的开发模式下启用图像缓存

相关文章：