3

Q. 画像の読み込み時間とパフォーマンスの点で最も効率的な手法は何ですか?

シナリオ 1。

以下のように、メディア クエリを使用して異なるサイズの画像を読み込むことですか。

/* Smartphone */
@media screen and (max-width: 320px) {
   .img-page-1-img {
      background: url('../images/img-page-1-img-117.jpg') no-repeat;
      width: 117px;
      height: 77px;
   }
}
/* Desktop */
@media only screen and (min-width: 769px) {
   .img-page-1-img {
      background: url('../images/img-page-1-img-234.jpg') no-repeat;
      width: 234px;
      height: 154px;
   }
}

また...

シナリオ 2。

1 つの大きな画像を読み込み、CSS を使用して「ストレッチ」し、max-width プロパティを設定してサイズを変更します..?

img {
   max-width: 100%;
}

ありがとう....

4

3 に答える 3

1

一部のブラウザーはすべてのアセット (現在のビューポートに一致しないものも含む) をプリロードするだけなので、メディア クエリにさまざまな画像を配置しても機能しません。

概要については、 http : //www.nealgrosskopf.com/tech/thread.php?pid=73を参照してください。

読み込む画像への参照を含むデータ属性を持つ div を使用します。javascript でウィンドウ幅を確認 (または matchMedia を使用) し、その場で画像を作成します。

非常に重要な画像 (コンテンツに関して/インデックスを作成する必要がある) については、最初に小さいバージョンを追加し、ウィンドウが十分に広い場合 (またはメディア クエリが matchmedia を使用して一致する場合)、高解像度バージョンに置き換えることができます。

于 2013-05-24T12:54:36.027 に答える
1

おそらく、さらに適切で応答性の高いアプローチは、両方を組み合わせることです。secondimgをフォールバックとして使用し、メディア クエリを使用しresolutionて画像を指定します。

img { ...low-res source }

@media (min-resolution: 2dppx) { 
     img { ...hi-res source }
}

高解像度を理解しているエージェントは、最初の要求を破棄して、高解像度の画像のみをフェッチする場合があります。最悪の場合、2 つの要求があります。それ以外の場合は、低解像度のソースのみをフェッチします。

resolution現在、W3 候補の推奨事項にあります

于 2013-05-24T11:06:42.730 に答える