How to stop images from flashing as they change on hover

Question

Is there anyway to stop my images from flashing as they reload new ones?

Here is the code that I'm using to swap images out onmouseover but as before it loads the new image, it quickly flashes and shows the divs background colour:

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>

Yes. [Preload your images](http://stackoverflow.com/questions/8504764/preload-images). — Andy, Dec 20 '13 at 11:16
Ah brilliant, I thought this was the case but I wasn't sure how to go about it. I'll check it out — man, Dec 20 '13 at 11:19

score 1 · Answer 1 · answered Dec 20 '13 at 11:20

1

Try this way

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

Actually loads the images into DOM and hides it by default.

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

answered Dec 20 '13 at 11:20

Sridhar R

20,190
6
38
35

n.b. requires jQuery. – Tim Dec 20 '13 at 11:21
Images are still flashing when I use this code.. even with jQuery – man Dec 20 '13 at 11:27
I can see it flashing in the fiddle. If you move the mouse on and off "home" you see it quickly flash white as it reloads the image. – man Dec 20 '13 at 11:44
OK, sometimes it doesn't flash with the placeholder images but when I use local images, it flashes – man Dec 20 '13 at 11:46

score 0 · Answer 2 · answered Dec 20 '13 at 13:49

Try this fiddle fiddle

1.- stack invisible divs over the original background

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

2.- mouseover/mouseout show/hide divs, there is no image loading (and no flashing)

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

3.- ...and you control the img in the css.

#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');
}

score -1 · Answer 3 · answered Dec 20 '13 at 13:58

-1

Use css

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

Use sprites for rollover images. This will take out any flashes and will save http requests making your website faster:

http://spritepad.wearekiss.com/

answered Dec 20 '13 at 13:58

user2867973

49
6

This won't change the background of a another div, only button1. – man Dec 20 '13 at 14:03

How to stop images from flashing as they change on hover

3 Answers3