Question

无论如何都要阻止我的图像在重新加载新图像时闪烁？

以下是我用来交换图像onmouseover的代码，但是在加载新图像之前，它会快速闪烁并显示div背景颜色：

JS：

function chbg(img) {
    document.getElementById('navholder').style.backgroundImage = 'url('+img+')'; 
}

HTML：

<a href="index.html"><div id="button1" onmouseover="chbg('http://placehold.it/300x250')" onmouseout="chbg('http://placehold.it/950x350')"><div id="triangle"></div><div id="buttonname">Home</div></div></a>

Answer 1

试试这种方式

var arrayOfImages = [
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]

实际上将图像加载到DOM中并默认隐藏它。

function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img />').attr('src',this).appendTo('body').css('display','none');
    });
}

Answer 2

试试这个小提琴fiddle

1.-在原始背景上堆叠不可见的div

<div id="button1_related"></div>
<div id="button2_related"></div>

2.- mouseover / mouseout显示/隐藏div，没有图像加载（并且没有闪烁）

function nowshow(id) {
  document.getElementById(id+'_related').style.display = 'block'; 
}
function nowhide(id) {
  document.getElementById(id+'_related').style.display = 'none'; 
}

3.- ...然后你控制了CSS中的img。

#button1_related{
position:absolute;display:none;
top:0;left:0;width:100%;height:100%;
background-image: url('http://placehold.it/300x250');
}
#button2_related{
position:absolute;display:none;
top:0;left:0;width:100%;height:100%;
background-image: url('http://placehold.it/340x150');
}

Answer 3

使用css

#button1 {
   background-image:url('<!-- Your url here-->');
}
#button1:hover {
   background-image:url('<!-- Your url here-->');
}

使用精灵来翻转图像。这将消除任何闪烁，并将保存http请求，使您的网站更快：

http://spritepad.wearekiss.com/

如何在悬停时更改图像闪烁

3 个答案: