2

多くの画面サイズで全幅で表示するバナーが必要です。これを達成するために、バナー画像の 4 つのバージョンがあります。

  1. banner-long@2x.jpg (2880x640)
  2. バナー-long.jpg (1440x320)
  3. banner-short@2x.jpg (1440x640)
  4. バナーショート.jpg (720x320)

srcset属性を使用しています。

<img
    src="/images/interface/banner-long.jpg"
    srcset="/images/interface/banner-long@2x.jpg 2880w,
            /images/interface/banner-long.jpg 1440w,
            /images/interface/banner-short@2x.jpg 1439w,
            /images/interface/banner-short.jpg 720w">

ただし、長いバージョンが読み込まれるように幅の広いブラウザーで開始し、ブラウザーの幅を縮小すると、長いバージョンがキャッシュされるため、短いバージョンは読み込まれません。ブラウザー (Chrome) は、既に高解像度バージョンをダウンロードしていると認識しているため、小さいバージョンを読み込む必要はありません。ただし、小さいバージョンを使用することの要点は、アスペクト比がモバイル デバイスにより適している (つまり、アスペクト比が小さい) ことです。小さい画像アセットを強制的に読み込みたい

これを行う方法はありますか？

4

2 に答える 2

1

この HTML を動的に作成する場合は?t=<current unix timestamp>、すべての画像の URL に追加するだけです。そうすれば、URL が常に異なるため、ブラウザーは毎回サーバーからそれらをロードする必要があります。

または、Web サーバーがそれらの画像を送信するときに「キャッシュしない」ヘッダーを送信するように構成することもできます (ただし、これはおそらくより難しく、過度に複雑になります)。

この目的での srcsets の使用には疑問があります。うまくいくかもしれませんが、srcset がその仕事に最適なツールであるかどうか、または srcsets がこのように使用されることを意図しているのかどうかはわかりません。実際の画像を切り替える場合は、それぞれ独自の srcset (異なる解像度で表示/非表示にできる) を持つ 2 つの異なる画像タグ、または何らかの JS ソリューションを使用して行う必要があるようです。

于 2015-08-10T18:34:55.027 に答える