0

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

跨浏览器测试如下：

Opera 12 - OK
FF 15.01 - OK
IE8 - OK！
Safari 5.1.7 - 好的
Chrome 22.0.1229.94 - 不工作

每当我在脚本中或直接使用控制台切换背景时，总会有 200-500 毫秒的停顿，根本没有背景，所以我的网站看起来很丑。我的顶部菜单鼠标悬停/鼠标离开效果很丑，我的展开/折叠的树效果看起来很丑，等等。

我使用的两种方法是：

[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 个元素/子元素的树中使用它，并且在任何浏览器中都没有闪烁。

4

1 回答 1

0

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

这是一种在两种状态之间切换时在没有任何插件或服务器端设置的情况下防止 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>
于 2012-11-11T01:02:13.370 回答