Pause between div background switching with Chrome

Question

It seems I'm not changing background properly when I'm switching between two div or anchor backgrounds, either directly in JS or using jQuery, with Chrome.

The crossbrowser test is as follow:

Opera 12 - OK
FF 15.01 - OK
IE8 - OK!
Safari 5.1.7 - OK
Chrome 22.0.1229.94 - Not working

Whenever I switch a background in a script or directly using a console, there's always a 200-500ms pause with no background at all, so my website looks ugly. My top menu mousehover/mouseleave effects are ugly, my trees effects with expand/collapse looks ugly, etc.

The two methods I'm using are:

[JS]     => element.style.backgroundImage = "url(siteimgs/image.png)";
[jQuery] => $('#element').css({ 'background': 'url(siteimgs/image.png)' });

I've read about it for IE8:

filter: expression(document.execCommand("BackgroundImageCache", false, true));

Should I change some server-side settings so that images are received with more refresh informations in the http response?

[EDIT]

Strange, I fiddled it and it works like a charm: http://jsfiddle.net/2wVND/6/

[EDIT 2]

I tested a lot of plugins and noticed that no preloading method works in Chrome.

[EDIT 3]

I've finally read in another thread that I need this in my response header to avoid this Chrome bug: Cache-control: public; max-age=31536000

But I -really- don't want to modify this behavior in the server everytime I debug my website.

[EDIT 4]

Ok. Temporary solution that doesn't require any preloading method nor header modification: switching the visibility between two state images placed one next to the other. Very clean, and still perfect for old browsers.

Example:

<div id="element172635">
    <div id="collapsed172635" style="background: url(collapsed.png); display: inline-block;"></div>
    <div id="expanded172635" style="background: url(expanded.png); display: none;"></div>
</div>

<script>
function toggle(state)
{
    var c = '';
    var e = '';
    if (state == 'expand')
    {
        e = '';
        c = 'none';
    } else
    {
        e = 'none';
        c = '';
    }

    collapsed172635.style.display = c;
    expanded172635.style.display = e;            
}
</script>

That's dirty but crossbrowser compatible and not longer to implemented than switching the image on an element. I'm using it in a tree with 100s of elements/subelements and there's no flickering in any browser.

Answer 1

I'll publish my workaround as an answer.

Here is a dirty method to prevent background flickering in Chrome without any plugin or server side setting when switching between two states.

<div id="element172635">
    <div id="collapsed172635" style="background: url(collapsed.png); display: inline-            block;">
    </div>
    <div id="expanded172635" style="background: url(expanded.png); display: none;">
    </div>
</div>

<script>
function toggle(state)
{
    var c = '';
    var e = '';
    if (state == 'expand')
    {
        e = '';
        c = 'none';
    } else
    {
        e = 'none';
        c = '';
    }

    collapsed172635.style.display = c;
    expanded172635.style.display = e;            
}
</script>