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

我正在每个键盘按键上运行一个函数来监视文本字段。addClass在第一次加载时改变了bg-image，但没有闪烁

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

这是工作很好，希望在第一负载有背景图像的闪烁现象。

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

任何想法？非常感激。

2012-08-31 JGuo

你可能会做一个“浸黑”的效果，如果没有别的工作。这可以减少突然闪烁可能导致的任何震动效果。但这取决于你为什么要改变图像。如果您正在尝试制作伪动画，则这不起作用。 – Shmiddty

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

2012-08-31 19:03:36

通常情况下，我会说这会工作，但我已经尝试用JavaScript预加载图像，以及像你提到的CSS，我甚至尝试使用精灵。当我使用文本输入条目触发类更改时，第一次加载时总会有闪烁。 – JGuo

这对我没有意义。 Robin提出的解决方案应该可行。你能否在jsfiddle.net中创建一个工作示例？ – sanbor

我用一个重复我的问题的jsfiddle编辑了原始问题。 – JGuo

使用Move.js你可以动画CSS支持的变化。

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

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

2012-08-31 20:57:39 Burimi

我做了一个只有CSS的实现才能做到与你的jsfiddle相同。

它是如何工作的？

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

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

我离开了JS代码，如果你需要使用Javascript来做到这一点，但仅适用于CSS应该足够多。

2012-09-04 17:04:18 sanbor

我已经想通了的情况下，其他人的问题运行到同样的问题。

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

2012-09-10 20:41:51 JGuo

回答