如何删除背景图片更改闪烁 [英] 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屋！