このかなり興味深い問題に対する答えが見つからないようです。Google Chrome では、属性、インライン スタイル、または CSS スタイルのいずれかを使用して幅や高さが設定されている画像は、最初の読み込み時にページに表示されません。ページのアクティビティがあった後にのみ表示されるようです。それでも、画像を自然なサイズでロードすると、ページのロード時に完全に問題なく表示されます. 画像は他のブラウザで動作するように表示され、クロムの要素を検査すると、画像がポップアップ ウィンドウに表示されます。
これを修正する方法を知っていますか？
「何らかのページ アクティビティの後」という意味を定義します。
また、幅および/または高さを設定したときに発生することにも言及しました。これにより、幅または高さを省略したテストの一部を信じて、ブラウザで計算できるようになります。その場合、はい、画像が適切に表示されることはなく、要素は画像がダウンロードされるまで最初のページの読み込み時にサイズがありません。ブラウザーは画像を検査し、境界ボックスを作成するために不足している寸法を判断します。
編集：
あなたのオンラインサイトを見た後、私の前のコメントはその要点を説明していますが、ブラウザが最初に画像を読み込んでサイズを検出する必要がある「自動」の幅を設定していることがわかります。これにより、ブラウザのレンダリングで「リフロー」が遅れます。幅と高さを設定しないと、クライアント ブラウザで計算する必要があります。そして、あなたがそれほど良いPCを持っていない場合、それは遅く見えます. 私のシステムでは、キャッシュなしでハード リフレッシュすると、すべての親指が表示される場合とそうでない場合があり、遅延が非常に目立ちます。
つまり、画像に常に幅と高さを持たせてください。
編集：
また、遅延を引き起こす可能性のある 404 エラーもいくつかあります。http://www.webpagetest.org/result/120725_0C_3N6/1/details/
編集：
唯一の選択肢は、ダウンロードされたリソースの順序で bg イメージを最初にロードして、できるだけ速くロードしてレンダリングすることだと思います。秘訣の 1 つは、非表示の div に bg 画像をロードしてすぐにプリロードし、ブラウザが最初にダウンロードするようにすることです。そうした場合でも、高解像度のショットがダウンロードされて読み込まれるのを待っている間に、黒い背景のフラッシュが表示されることを期待する必要があります. とにかく、背景画像に幅と高さを設定することはできません。さらに進むと、ページの読み込み後にすべてのサムネイルを AJAX 呼び出しで読み込むことで、応答時間を短縮できるため、大きな写真ショットと競合することもなく、dom が完全に読み込まれるまでダウンロードを開始できます。そこに素敵な効果を入れて、サムネイルの読み込みをフェードインしたり、その効果を発揮したりすることもできます。