[解決済み] Javascriptで画像をキャッシュする方法
質問
私の友人と私は、将来より速く表示するために特定の画像をキャッシュしたいと思い、ウェブサイトを制作しています。 私は 2 つの主要な質問があります。
- どのように画像をキャッシュするのですか?
- 一度キャッシュされた画像はどのように使うのですか? (一応確認しておきますが、Aページで画像がキャッシュされた場合、キャッシュから呼び出してBページで使用することは可能ですよね?)
また を設定することはできますか? を設定することはできますか?
例および/またはこれをさらに説明するページへのリンクが含まれていれば、非常に感謝されます。
生のJavascriptまたはjQueryバージョンのどちらを使用しても問題ありません。
どのように解決するのですか?
ブラウザに何らかの方法で画像が読み込まれると、その画像はブラウザのキャッシュに保存され、現在のページでも他のページでも、ブラウザのキャッシュからその画像が消去される前に使用されれば、次に使用するときの読み込み速度がはるかに速くなります。
つまり、画像をプリキャッシュするには、ブラウザに画像を読み込むだけでよいのです。 多くの画像をプリキャシュしたい場合は、javascript で行うのが最善でしょう。javascript で行うと、一般にページの読み込みが滞ることはありません。 このようにすることができます。
function preloadImages(array) {
if (!preloadImages.list) {
preloadImages.list = [];
}
var list = preloadImages.list;
for (var i = 0; i < array.length; i++) {
var img = new Image();
img.onload = function() {
var index = list.indexOf(this);
if (index !== -1) {
// remove image from the array once it's loaded
// for memory consumption reasons
list.splice(index, 1);
}
}
list.push(img);
img.src = array[i];
}
}
preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"]);
この関数は何度でも呼び出すことができ、そのたびにプリキャッシュに画像が追加されるだけです。
いったん画像がjavascriptによってこのようにプリロードされると、ブラウザはそれらをキャッシュに保持し、他の場所(ウェブページ内)で通常のURLを参照するだけで、ブラウザはネットワーク経由ではなくキャッシュからそのURLを取得します。
結局、時間が経つにつれて、ブラウザのキャッシュはいっぱいになり、しばらく使われていない古いものは捨てられてしまうかもしれません。 そのため、最終的に画像はキャッシュからフラッシュされますが、しばらくはそこにとどまるはずです (キャッシュの大きさと、他のブラウジングの量に依存します)。 画像が実際に再びプリロードされたり、Web ページで使用されたりするたびに、ブラウザのキャッシュ内の位置が自動的にリフレッシュされるので、キャッシュから洗い流される可能性は低くなります。
ブラウザ キャッシュはページをまたぐので、ブラウザに読み込まれたどのページに対しても機能します。 そのため、サイトの 1 か所で事前キャッシュを行い、ブラウザ キャッシュはサイト上の他のすべてのページで機能します。
上記のようにプリキャッシングする場合、画像は非同期に読み込まれるため、ページの読み込みや表示を妨げることはありません。 しかし、ページにそれ自身の画像が多数ある場合、これらのプリキャッシュ画像は、ページに表示されている画像と帯域幅や接続を競合させる可能性があります。 通常、これは目立った問題ではありませんが、遅い接続では、このプリキャッシュがメインページの読み込みを遅くする可能性があります。 プリロード画像が最後に読み込まれることが問題ない場合は、他のすべてのページ リソースがすでに読み込まれた後までプリロードの開始を待機する関数のバージョンを使用することができます。
function preloadImages(array, waitForOtherResources, timeout) {
var loaded = false, list = preloadImages.list, imgs = array.slice(0), t = timeout || 15*1000, timer;
if (!preloadImages.list) {
preloadImages.list = [];
}
if (!waitForOtherResources || document.readyState === 'complete') {
loadNow();
} else {
window.addEventListener("load", function() {
clearTimeout(timer);
loadNow();
});
// in case window.addEventListener doesn't get called (sometimes some resource gets stuck)
// then preload the images anyway after some timeout time
timer = setTimeout(loadNow, t);
}
function loadNow() {
if (!loaded) {
loaded = true;
for (var i = 0; i < imgs.length; i++) {
var img = new Image();
img.onload = img.onerror = img.onabort = function() {
var index = list.indexOf(this);
if (index !== -1) {
// remove image from the array once it's loaded
// for memory consumption reasons
list.splice(index, 1);
}
}
list.push(img);
img.src = imgs[i];
}
}
}
}
preloadImages(["url1.jpg", "url2.jpg", "url3.jpg"], true);
preloadImages(["url99.jpg", "url98.jpg"], true);
関連
-
[解決済み] 配列から特定の項目を削除するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでメールアドレスを検証するのに最適な方法は何ですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
-
[解決済み] javascript includes() 大文字小文字を区別しない
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] WebStormで未解決の変数が大量にある場合の警告に対処する方法は?
-
[解決済み] TypeScriptのdeclare classとinterfaceの違いとは?
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] querySelectorAllがない場合、ライブラリを使用せずに属性で要素を取得する?
-
[解決済み] Chrome拡張機能:popup.htmlを強制終了させる