背景イメージの事前読み込みと304の応答

Question

背景イメージの属性で使用されているイメージをプリロードすると、Safariブラウザ（デスクトップとモバイル）は既に読み込まれているイメージを再要求していました。

画像があらかじめロードされている場合、Chromeブラウザ（デスクトップとモバイル）は再度画像を要求しません。一度に表示されます。

Safariは304応答を取得するためにSafariで再要求するので、Safariで数時間待つ必要があります。

バックグラウンドイメージがクラスによって動的に変更されるdivタグがあると、そのクラスが変更されるたびにフリッカーが発生するため、Safariで再リクエストしたくありません。

デスクトップでは重要ではありませんが、モバイルでは非常に重要です。

どのように私はそれに達することができますか？

P.S.

事前ロードは、imgタグ、明示的なCSSの背景画像またはコンテンツ属性、またはjavascriptを使用して何らかの方法で実行できます。

Answer 1

私はこの問題を特別な状況で解決しました。

私のウェブサイトでは、BODYタグにバックグラウンドイメージを追加し、ユーザーがボタンをクリックするとコールバック機能付きのEventListenerを追加します（バックグラウンドイメージURLを変更し、次のクリックのために別のイメージをプリロードします） 。

（hrefが127.0.0.1の）ローカルホスト環境でこれらの機能をテストすると、クリック後、バックグラウンドイメージのURLを変更すると、ページ全体が点滅/フリックします。私はWiresharkでHTTP res/repを掘り下げ、Safariが同じ画像をリクエストすることを発見しました（既にプリロードされていても）。

イメージサーバー（hrefがIPアドレスではなくwww.abcdefgh.com/image/test_xxx.jpgのようなもの）でこれらの機能をテストすると、瞬き/フリックが発生しました。 Wiresharkで見て、再要求も行っている！