クロムはgifの背景イメージを表示しません

現在クロム14を実行していて、ログインページに回転GIFグラフィックを表示できません。

クロムのページは次のようになります:

enter image description here

他のすべてのブラウザーでは次のようになります。

enter image description here

再現する:

ログイン:

有効なメールアドレスとパスワードを入力して「ログイン」をクリックすると、黒い進捗インジケータが表示されたら、STOPを押すと、ブラウザにログインエラーが表示されません。

背景がクロムに​​表示されないことに注意してください。興味深いことに、要素を調べて背景画像の位置に1ピクセルを追加すると、画像が表示されます。

私にはクロムバグのようなにおいがしますが、回避策はありますか?

edit: Another really strange thing is: if i put an alert at the end of the function that shows this processing div, after the alert, the background-image becomes visible.

4

2 答え

私はあなたの問題を再現することができますが、私は手動でコンソールでポップアップをトリガする場合、私はスピナーがうまく表示されます:

> OM.processing($('div.portlet.login form'));

だから私の推測ですが、あなたのスピナーはプリロードされておらず、あなたはAJAXリクエストを待っている間にウィンドウを開いています。どのような理由であれ、AJAXリクエストが保留中の間は他のブラウザが画像を読み込みますが、Chromeはその画像を読み込みません。これをテストするために、私はコンソールでこれを試しました:

> var img = $('');

通常通りログインしようとしましたが、私はスピナーを見ました。

だから、上記のコードでスピナーイメージをプリロードすると、おそらく正しく動作するはずです。

5
追加された
CSSを依存しないようにしたい場合は、この var bg = $(this).css( 'background-image')を使用することができます。 bg = bg.replace( 'url('、 '')。replace( ')'、 ''); var forceChromeToLoadImage = $( ''); stackoverflow.com/questions/8809876/…
追加された 著者 Adrien Be,

私はnrabinowitzの答えを使うときに問題にぶつかりました。

だから私は0ディメンションのページのどこかに関連する画像を含めてしまった。

HTML:

<input class="button" id="myButton" type="submit" name="searchButton" />
...


Javascript:

/*
  Hack for Chrome issue with GIF bg images
    [1] gets the bg url from the CSS
    [2] Extract the path: by removing opening string "url(" and closing character ")" that surround it
    [3] Sets the relevant image tag with our GIF image's path
*/
$('#myButton').click( function() {
    var bg = $(this).css('background-image');  //[1]
    bg = bg.replace('url(','').replace(')','');//[2]
    $('.loaderHackForChrome').att('src', bg);  //[3]
});

source: http://chromespot.com/forum/google-chrome-troubleshooting/4336-background-image-doesnt-load.html

EDIT: this issue may have been fixed now in 2016

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript