Home/ Questions/Q 8888119
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T21:58:02+00:00

It seems I’m not changing background properly when I’m switching between two div or

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0