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

Question

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

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

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

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

正如这个jsfiddle所见证的那样：http: //jsfiddle.net/QpvUQ/2/

有任何想法吗？非常感激。

score 1 · Accepted Answer

将背景图像应用到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
}

score 1 · Accepted Answer

使用Move.js，您可以为 CSS 更改设置动画。

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

我做了一个只有 CSS 的实现，与你的 jsfiddle 一样。

这个怎么运作？

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

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

如果你需要用 Javascript 来做，我留下了 JS 代码，但只有 CSS 就足够了。

4 回答 4