バックグラウンドイメージを遅延ロードするときにダブルリクエストを防止する

Question

javascriptを使用してバックグラウンドイメージを読み込み、ダウンロードが完了したときにコールバックを使用しようとしています。私は、それはクロム、Firefox、およびIE 9+にうまく機能しているが、サファリ（OSXとiOS）やAndroidのブラウザを使用している場合、それは、サーバーに2つの要求を行い、このコード

var img = new Image(); 

img.onload = function() { 

    element.style.backgroundImage = 'url(' + this.src + ')'; 
    // Need to do other things here 
} 

img.src = 'path_to_image.jpg'; 

を使用しています。これらの2つのブラウザはキャッシュを使用していないようです。すべての画像を2回ダウンロードせずにこれを行う方法に関するアイデア？

それが助け場合、私は、画像ファイルを送信するときのCache-Controlヘッダを設定することでこれを解決し

Answer 1

IE 10と互換性があり、それ以上の年齢であることをそれを必要としません。 Safariは、特に指定しなければすぐに期限切れになると見なされるため、プリロードと最初の使用の間に期限が切れています。

これらのヘッダーを変更するには、Webサーバーのディレクティブを使用することをお勧めします。問題の一般的な解決策が見つかったところでお勧めします（jQuery Pre-load Not Caching in Chrome or Safari）。 Apacheの上で1日のキャッシュを有効にすると、次のようになります。

<FilesMatch "\.(gif|jpeg|jpg|png|svg)$"> 
    Header set Cache-Control "public, max-age=86400" 
</FilesMatch> 

実際にそれを確認するための簡単な試みで、私のために動作しませんでしたが、どちらもthe example in the Apache 2.4 docsはので、私はおそらく何か他のものが起こっていなかったこと。

は、私の場合は、コントローラで、元画像を生成することが起こったので、私はそれらを返す前、私は私のアプリのフレームワーク（CakePHPの3）の機能を使用してヘッダを設定することになった：

$this->response->cache('-10 seconds', '+40 seconds'); 

この結果

Last-Modified: Fri, 24 Jun 2016 10:20:14 GMT 
Expires:   Fri, 24 Jun 2016 10:21:04 GMT 
Cache-Control: public, max-age=40 

クロッククライアントとサーバ間の違いが、the HTTP/1.1 specによるについて、私は心配しました：

ケーキに応じて3つのヘッダを追加します

応答にExpiresヘッダーとmax-age指示の両方が含まれている場合、Expiresヘッダーがより制限的であっても、max-age指示はExpiresヘッダーをオーバーライドします。