多くの多くのサイトがこの手法を使用しています (Facebook、Google も同様)。
たとえば、facebook.com を開きます。
このページを保存します (*.MHTM ではなく、画像付きの HTML として) (ログイン ページを意味します)
それは保存します：
facebook_files(ディレクトリ) facebook.html(ファイル)
次に、フォルダー内に、ページのすべての主要な画像を含む 1 つの GIF ファイルが表示されます。
質問は: 1 つのファイル内の多くのチャンクを読み取る方法は?? そして、このアプローチをどのように呼ぶのですか？
これらの画像は「スプライト」と呼ばれます。それらについては、この記事をご覧ください。
基本的な考え方は、スプライトの画像を使用したいときはいつでも、大きなスプライト画像の一部だけを表示する要素を用意することです。したがって、ページ内の各「画像」は、実際にdivはこの画像を背景として、オフセットされているため、右側の部分が透けて見えます。
主な利点は、ページに必要なリクエストが少なくて済むため、読み込みが速くなることです。
スプライトを簡単に使用できるオンライン ツールがいくつかあります。私はそれらを使用したことがないので、推奨することはできませんが、ツールを使用すると多くの作業を節約できます。
これは、アーケード ゲームで使用されるスプライト (異なる位置にあるキャラクターの 1 つの画像) のような、「スプライト」と呼ばれるものです。基本的には、小さな画像を含む画像の 1 つの巨大なチャンクです。
このアプローチの利点は、100 の小さな GIF に対して 100 の異なる HTTP リクエスト (オーバーヘッドの原因) の代わりに、この 100 の GIF を含む 1 つの巨大な画像をリクエストするだけでよいことです。次に<img>、画像ごとに使用するbackground代わりに、代わりに CSS を使用background-positionし、コンテナを介して適切な画像を配置して、適切な画像を表示します。