3

最近、Chrome で非常に奇妙なバグが発生しました。これは、最初にページをロードしたとき、またはシークレット モードで背景画像が表示されないときです。

ページを F5 キーで押すと、背景画像がすべて読み込まれます。

css を調べると、css パネルに画像の URL が表示されますが、URL の上にマウスを置いても、画像のプレビューを含むツール ヒントは表示されません。

ダウンロードしたリソースを確認しても、背景画像のダウンロードについて言及されていません。

その後、ページを更新すると正常に動作し、css URL のツールチップにはプレビューも表示されます。

このバグは初回ロード時にランダムに発生することがあり、これを再現する保証はありません。

また、注目に値するのは、クロムの背景画像プロパティのチェックを外してから再度チェックすると、画像がダウンロードされて表示されることです。

この問題を解決する jquery がありますが、ご覧のとおり、あまりエレガントではありません。

$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image', bg);

});

これは、クロムの複数のバージョンのウィンドウのすべてのインスタンスで発生します。

どんなアイデアも素晴らしいでしょう！ありがとう！

http://ensa.ac.ukでそれが起こるのを見ることができるかもしれません

ここにビデオデモンストレーションがあります@ http://youtu.be/oLTyhk5rXgE

4

5 に答える 5

2

注意してください。

問題は解決していました。

問題は、ブラウザがすべての css 背景画像を最後にダウンロードすることでした。そのため、画像のダウンロードが完了する前にページを更新すると、ページが再度読み込まれるときにキャッシュから読み込まれます。しかし、画像が完全にダウンロードされていないため、正しく表示されません。

于 2013-03-21T14:10:14.777 に答える
0

オーウェン、

私が取り組んでいるアプリケーションでは、まだこの問題が見られます。これもハッキーなソリューションであることは知っていますが、投稿したjqueryソリューションよりもハッキーではありません。css インクルード後の時間に基づいてバージョン番号を投げただけです。

例 " rel="stylesheet" type="text/css" />

これによりcssがキャッシュされないことはわかっていますが、他の解決策は見つかりませんでした.

于 2013-11-22T19:32:30.527 に答える
0 
Change css class as:


#nav
{
    background-image: url(../images/logo-bg2.jpg);
    height: 180px;
}
于 2012-09-01T13:34:27.433 に答える
0

まず、これらを修正します。

backg1round-color: #c7dfe3;
backg1round-color: rgba(255,255,255,0.67);

images がサブフォルダーの場合は、

url('images/logo-bg2.jpg');

それ以外の

url('/images/logo-bg2.jpg');

main.css で

于 2012-09-01T12:37:45.910 に答える
0

代わりにこれを試してください。ただし、テストされていません。

$('*').each(function(){
var bg = $(this).css('background');
$(this).css('background', 'none');
$(this).css('background', bg);
});

また、CSS にも関連する変更 (つまり、background-imageへの変更) を加えます。background

または試してみてください。

$('*').each(function(){
var bg = $(this).css('background-image');
$(this).css('background-image', 'none');
$(this).css('background-image','url(bg)'); // or try url("bg") i am confused :P
});

いくつかの検索と調査から、私は結論に達しました。

これに取り組む方法は、クラスを使用することです。状態ごとに個別の CSS クラスを用意し、jQuery を使用してクラスを変更するだけです。これにより、クラスを設定したときにすべての画像が実際にダウンロードされ、利用可能になることが保証されます.

于 2012-09-01T13:09:25.020 に答える