0

JSで直接、またはChromeでjQueryを使用して、2つのdivまたはアンカーの背景を切り替えると、背景が適切に変更されていないようです。

クロスブラウザテストは次のとおりです。Opera12-OKFF15.01

-
OK
IE8-OK！ Safari5.1.7-OKChrome22.0.1229.94-動作し
ない

スクリプト内で、またはコンソールを直接使用して背景を切り替えると、背景がまったくない状態で常に200〜500ミリ秒の一時停止が発生するため、Webサイトが見苦しくなります。トップメニューのマウスホバー/マウスリーブ効果が醜い、展開/折りたたみのある木の効果が醜い、など。

私が使用している2つの方法は次のとおりです。

[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のバグを回避するために応答ヘッダーにこれが必要であることを読みました。Cache-control：public; max-age = 31536000

しかし、私は-本当に-自分のWebサイトをデバッグするたびにサーバーでこの動作を変更したくありません。

[編集4]

Ok。プリロード方法やヘッダーの変更を必要としない一時的な解決策：隣り合って配置された2つの状態画像間で可視性を切り替えます。非常にクリーンで、古いブラウザにも最適です。

例：

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

これは汚いですが、クロスブラウザと互換性があり、要素の画像を切り替えるよりも実装に時間がかかりません。何百もの要素/サブ要素を持つツリーで使用していますが、どのブラウザでもちらつきはありません。

4

1 に答える 1

0

回避策を回答として公開します。

2 つの状態を切り替えるときに、プラグインやサーバー側の設定なしで、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 に答える