Question

When the user hovers over a particular area of screen, I create a div, then set the background:

div= document.createElement('div');

if (yellowBg) {
    div.style.backgroundImage = 'url(\'../partHoverBgYellow.png\')';
}
else {
    div.style.backgroundImage = 'url(\'../partHoverBg.png\')';
}

parent.appendChild(div)

In Firefox and IE, the background image gets cached after it is fetched for the first time.

But in chrome, it appears that it is not cached. The result being that the div appears before its background is set every time.

I have checked using Fiddler, and the image is indeed fetched every time.

Is there a way I can prevent this from happening?

Answer 1

You can try setting the background with css and only change the className in code. This jsfiddle shows an idea to do that. In the Network tab of the Chrome developer tools you’ll see that the images, after initial load, are subsequently loaded from cache.

The code becomes as simple as: div.className = yellowBG ? 'yellowBG' : '';

In this jsfiddle the images are preloaded.