Question

当我在两个div或锚背景之间切换时，无论是直接在JS中还是在jQuery中使用Chrome，我都没有正确地改变背景。

交叉浏览器测试如下：

歌剧12 - 好的 FF 15.01 - 确定
IE8 - 好的！
Safari 5.1.7 - 确定
Chrome 22.0.1229.94 - 无法正常工作

每当我在脚本中切换背景或直接使用控制台时，总会有200-500ms暂停，根本没有背景，所以我的网站看起来很难看。我的顶级菜单mousehover / mouseleave效果很难看，我的树效果扩展/折叠看起来很难看等等。

我正在使用的两种方法是：

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

我已经为IE8读过它了：

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

我是否应该更改某些服务器端设置，以便在http响应中接收到包含更多刷新信息的图像？

[编辑]

奇怪，我摆弄它，它就像一个魅力： http://jsfiddle.net/2wVND/6/

[编辑2]

我测试了很多插件并注意到Chrome中没有预加载方法。

[编辑3]

我终于在另一个帖子中读到了我在响应标题中需要这个，以避免这个Chrome错误：缓存控制：公共;最大年龄= 31536000

但我真的 - 每次调试我的网站时都不想在服务器中修改这种行为。

[编辑4]

确定。不需要任何预加载方法或标头修改的临时解决方案：切换两个状态图像之间的可见性。非常干净，仍然适合旧浏览器。

示例：

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

这是肮脏但交叉浏览器兼容，而不是实现比切换元素上的图像。我在一个有100个元素/子元素的树中使用它，并且在任何浏览器中都没有闪烁。

Answer 1

我将发布我的解决方法作为答案。

在两种状态之间切换时，这是一种防止Chrome 背景闪烁但没有任何插件或服务器端设置的脏方法。

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

使用Chrome在div后台切换之间暂停

1 个答案: