html - サイトに画像がダウンロードされる順序は?

Question

画像はマークアップに表示されている順序でダウンロードされますか?それとも、表示されているアイテムがダウンロードされる順序は英数字ですか?

注目の画像の前にサイト アセット スプライトをダウンロードするように注文したいので、疑問に思っています。

Answer 1

言いにくいのですが、マークアップに画像があり、CSS に画像があります。実際にはルールはありません。ブラウザ次第です。

ソース順に要求された場合、応答 (すべての画像データ) が要求された順序で受信されるという保証はありません。ブラウザは複数のリクエストを同時に行うことができるため、画像が提供されている場所と画像のサイズによって異なります。

また、それらはすでにキャッシュされている可能性があります。不要なものについて過度に騒いでいる可能性があると思います。

JavaScript のプリローダー ルーチンなどを実験したり調べたりすることはできますが、正直なところ、心配する必要はありません。ユーザーはこの種のエクスペリエンスに慣れています。

最も簡単な実装は、これらの画像をすべて非表示にして (非 JS が影響を受けないように JavaScript を使用して)、ページの onload イベントを待つことです。その後、JavaScript タイマーを使用して、画像を希望する順序で表示することができます。に登場。

onload イベントは、関連付けられたすべてのページ アーティファクトの読み込みが完了すると発生しますが、これが発生しない (できればめったに) こともあれば、耐えられないほど長い時間がかかることもあります。まあ、これが発生した場合に備えて、フォールバックとして onload イベントハンドラーをトリガーするタイムアウトを設定し、持っているものを表示することもできます。これは、何も凝ったことを気にせず、物事をシンプルに保つように私を導くようなものです.

画像の読み込み中にページがリフローすることが問題である場合は、画像のプレースホルダーのサイズ (IMG 要素の幅と高さの属性など) を指定していないことが原因です。

Answer 2

Firefoxは、マークアップに表示されている順序で画像を読み込むようです。Chrome とインターネットは同じことをしていると思います。

Firefox または Chrome コンソールで Firebug を使用して、自分でテストすることができます。