私はJavaScriptの画像ループ(気象レーダーサイト用)を作成しています。次のループを使用して、ページの読み込み時に10個の画像すべてをプリフェッチしています:
Radar_Images = new Array();
var now = new Date();
for (var i = 0; i <= 9; i++){
Radar_Images[i] = new Image();
Radar_Images[i].src = "radar_" + i + ".jpg?" + now.getTime();
}
「？」を追加しています。+ now.getTime(); ブラウザがページをロードするときに新しいコピーを取得し、正しく動作するようにするためです。10 個の新しい画像がダウンロードされ、配列は次のように正しく読み込まれます。
[0] = images/radar_0.jpg?12345 (12345 は単なる例です...実際には 13 桁の数字です)
[1] = images/radar_1.jpg?12345
[2] = 画像/radar_2.jpg?12345
等
配列をループして JavaScript アニメーションを再生すると、キャッシュされた各画像がスムーズに再生されます。
XMLHttpRequest を使用して、radar_0.jpg ヘッダーの「Last-Modified」スタンプをチェックする定期的なポーリングがあります (radar_0.jpg は常に最新の画像です)。新しいタイムスタンプが検出されると、新しいイメージをダウンロードする関数にジャンプします。
var now = new Date();
Radar_Images[9].src = Radar_Images[8].src;
Radar_Images[8].src = Radar_Images[7].src;
Radar_Images[7].src = Radar_Images[6].src;
Radar_Images[6].src = Radar_Images[5].src;
Radar_Images[5].src = Radar_Images[4].src;
Radar_Images[4].src = Radar_Images[3].src;
Radar_Images[3].src = Radar_Images[2].src;
Radar_Images[2].src = Radar_Images[1].src;
Radar_Images[1].src = Radar_Images[0].src;
Radar_Images[0].src = "images/radar_0.jpg?" + now.getTime();
これが意味することは、画像を 1 ノッチ下にシャッフルし、最も古い画像を破棄し、更新されたレーダー_0.jpg 画像を [0] スロットにダウンロードすることです。そうすれば、変更されたのは 1 つのみなので、10 個のイメージすべてを再度ダウンロードする必要はありません。期待どおりに動作し、更新された配列は次のとおりです。
[0] = images/radar_0.jpg?67890 <- now.getTime() からの新しい一意のタグに注意してください
[1] = images/radar_0.jpg?12345 <- 以前は位置 0 でした...
[2] = images/radar_1.jpg?12345 <- 以前は位置 1 でした...
等
ここで問題が発生します。
画像をループすると、Images[0] と Images[1] の両方に最新のダウンロード済み画像が表示されます。Image[1] は、キャッシュされた古いイメージを指しているにもかかわらず、失われます。ブラウザが .jpg の後のすべてを忘れているようです。?12345 は ?67890 とは異なりますが、これらを同じ画像、rader_0.jpg として認識します。
私が疑問に思っているのは、ブラウザーに .jpg?12345 と .jpg?67890 を尊重させ、一意の画像を表示させる方法はありますか? .jpg
どうもありがとう！
アップデート：
そのため、さらに調査すると、javascript ループ中に正常にキャッシュされているように見えますが、画像がキャッシュされていないように見えます。ループは確かに十分に速く再生されているため、すべてが継続的にダウンロードされているわけではありません。しかし、シフトが発生すると、画像 (9 つだけ) が再ダウンロードされているようです。言い換えると：
[0] = images/radar_0.jpg?67890 <- これにより、新しいrader_0.jpg ファイルが読み込まれます (正しい)
[1] = images/radar_0.jpg?12345 <- これにより、新しいrader_0.jpg ファイルも読み込まれます (正しくない)
[2] = images/radar_1.jpg?12345 <- これで以前のrader_0.jpgファイルがロードされ、サーバー上でradar_1.jpgに名前が変更されました
[3] = images/radar_2.jpg?12345 <- これで以前のrader_1.jpgファイルがロードされ、サーバー上でradar_2.jpgに名前が変更されました
...
[9] = images/radar_8.jpg?12345
images/radar_9.jpg?12345 を指しているものは何もないため、名前が変更されたrader_9.jpg (以前はrader_8.jpg) はダウンロードされないことに注意してください。 10.
ページを十分に長く放置すると、最終的に配列がシフトアウトされ、すべてのポインターが images/radar_0.jpg? を指します...そして ? の後に何が続きますか? はそれぞれ異なります。しかし、それらはすべて同じ画像 (rader_0.jpg) であるため、「ループ」するものはもうありません。
そのため、キャッシュが完全に無視されているように見えますが、ループ自体で機能する理由はわかりません。
私のHTMLヘッダーは次のように設定されています：
<META HTTP-EQUIV="Cache-Control" CONTENT="public">
ご協力いただきありがとうございました。