如何删除背景图片更改闪烁 [英] How to remove background image change flicker
问题描述
我有一个以图片为背景的< div>
。我拥有它,以便每当有人将鼠标悬停在< div>
上时,背景图片将变为其他图片。问题是,当鼠标悬停在< div>
上时,第一次当背景图像加载时闪烁,几毫秒内就看不到图像。
我如何消除这种闪烁?如何在用户实际悬停在< div>
之前加载用于悬停的图片,以便立即生效。
更改< div>
背景的代码非常简单:
#someID {
background-image:* image source *;
}
#someID:hover {
background-image:*另一个图像源*
}
我知道有一个解决方案,将两个所需图像放在一个图像中,然后播放背景位置,但这不是一个选项,因为我总是将背景图像设置为像这样:
image-size:100%100%;
在window.load()函数中, p>
-
确保所有图像都加载到页面上。
FYI - 您可能想要设置每个图像CSS位置为绝对位置,Top:0px和Left:0px,都位于父div中,位置为relative,具有一定的宽度和高度。 使用jquery的 set display:none对于那些不应该显示为DC_的应用程序显示为 。 jquery.com/hover/\">悬停方式或点击方式点击
图片。在您选择的方法函数中,fadeOut()当前的图像和
fadeIn()图像有一个显示:没有与之相关联的图像。
I have a <div>
with an image as a background. I have it so that whenever someone hovers over the <div>
, the background image changes to some other image. The problem is, the first time when your mouse hovers over the <div>
, the background image flickers as it loads and you see no image for few milliseconds.
How do I remove this flicker? How do I load the image for the hover before the user actually hovers over the <div>
so the effect is immediate.
My code for changing the <div>
background is very simple:
#someID{
background-image: *image source*;
}
#someID:hover{
background-image: *Another image source*
}
I know that there is a solution with putting the two desired images in one image and then play with the background position, but that's not an option here because I always set the background image to be like this:
image-size: 100% 100%;
Within a window.load() function,
make sure all the images are loaded onto the page.
FYI - You probably want to set each image's CSS position to absolute, with a Top:0px and Left:0px, all within a parent div that has a position:relative, with a certain width and height.set display:none to the ones that should'nt be shown as DC_ pointed out
use jquery's hover method or click method to click on the image. Within the method function you choose, fadeOut() the current imag and fadeIn() the image that has a display:none associated to it.
这篇关于如何删除背景图片更改闪烁的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!