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.