javascript - 如何在悬停时停止图像闪烁

Question

有没有办法阻止我的图像在重新加载新图像时闪烁？

Fiddle

这是我用来将图像换出 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');
    });
}