これは私を夢中にさせています。開発中の FB アプリに背景画像の表示に問題があります。
問題のアプリ: Rock Conquest
問題: Google Chrome を使用して最初にアプリをロードしたとき
に、本文と DIV クラスの背景画像がMainHeader表示されません。ページを更新すると、それらが表示されます。Element Inspector を開き、背景画像ボックスのチェックを外してから再度チェックを入れると、それらが表示されるようにすることもできます。その後、Facebook/ブラウザを閉じてから再度ログインするまで、正しく表示され続けます。
この問題は Chrome を使用している場合にしか見たことがなく、Facebook からアプリにアクセスした場合にのみ発生します。アプリ ( www.rockconquest.net )に直接アクセスすると、問題なく動作します。
フロントページのページソースをコピーして静的ページに貼り付けるだけで、何も変更しなくても問題なく動作します。
この種のことは通常、Facebook、Twitter、Github などの ajax を多用するサイトで作業しているときに発生します。
JavaScript を使用して背景画像を表示している場合はsetTimeout、数ミリ秒後にロードしてみてください。
Chrome の開発者ツールは、2 つの背景画像のリクエストが「キャンセル」されたことを示していますが、一見しただけではその理由はわかりません。
パトリックが彼の答えで疑ったように、これらの背景画像を JavaScript を使用して表示しているとは思いません (なぜそうするのですか) - しかし、JavaScript を使用して「クイックフィックス」/回避策を試すことができます。
ページの読み込み時に、2 つの新しい Img オブジェクトを生成し、それらの src 属性を背景画像の URL に設定します。
var whatever = new Img();
whatever.src = "…";
これにより、Chrome が読み込まれると、必要な場所にそれらを自動的に表示するようになる可能性があります。そうでない場合は、Img オブジェクトの onload/oncomplete ハンドラを使用して、要素の背景スタイルを再度明示的に設定できます。少なくとも、Chrome はそうすべきだと思います。最後にそれらを表示します。
また、他のブラウザではパフォーマンスが低下することはありません。なぜなら、最初の試行で画像をロードできた場合は、キャッシュから画像を引き出すだけだからです。