本文介绍了如何删除背景图片更改闪烁的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个以图片为背景的< 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的或点击
    图片。在您选择的方法函数中,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 theimage. Within the method function you choose, fadeOut() the current imag andfadeIn() the image that has a display:none associated to it.

这篇关于如何删除背景图片更改闪烁的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-18 11:32
查看更多