Javascript: 画像がすでにキャッシュされているかどうかを確認する方法

debugcn 投稿 Dev

ティム・シュミット

JavaScript を少し学び始めたばかりで、画像がすでにキャッシュにロードされているかどうかを確認する方法があるのではないかと考えました。

私のスクリプトでは、別の Web ページからランダムな画像をいくつか読み込んで表示しています。同じ画像が 2 回目に表示されるとき、スクリプトはすでにロードされている画像を使用せず、代わりに同じ画像を再度ロードして、2 つの画像がキャッシュに保存されるようにします。

ここで、画像がすでにキャッシュに保存されているかどうかを確認し、保存されている場合は、再度読み込む代わりにキャッシュされた画像を使用します。

私のコード:

<script>
    var img = document.createElement('img');
    var index;

    //On Click create random 3digit number between 1 and 100
    document.getElementById('image').onclick = function(){
        var index = '' + Math.floor(Math.random() * 100 +1);

        while(index.length < 3) {
            index = '0' + index;
        }

        loadImages(index);
    };

    //Load the image with the created number
    function loadImages(id) {
        var src = 'someWebPage/' + id +'.png';            

        img.onload = function () {
            document.getElementById('image').getContext("2d").drawImage(img, 0, 0, 300, 300);
        }

        img.src = src;            
    } 
</script>

私のキャッシュの写真:

ご覧のとおり、キャッシュには 2 回030.pngあります032.png。

アドバイスをいただければ幸いです。

編集:この問題に直面している他の人にとっては、実際にはまったく問題はありません。Chrome はすでにすべてを正しく行いましたが、私は気付かなかっただけです。コラムSizeからわかるように、写真はすでにキャッシュからロードされています。

ビジョク

(このコンテキストでの) キャッシングが処理される方法は、ブラウザが一連のヘッダーを使用してサーバーとネゴシエートして、基本的にサーバーに「このバージョンのリソースを既に持っています」と伝え、サーバーは「OK、それは引き続き有効です。新しいものをダウンロードする必要はありません。」したがって、JavaScript 側のキャッシュについて心配する必要はありませんが、サーバー側で正しいCache-Controlヘッダーを設定していることを確認してください。キャッシュを設定する方法について、サーバー/フレームワークの選択に関する質問/回答がすでにある可能性があります。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-08-3

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

Javascript: 画像がすでにキャッシュされているかどうかを確認する方法

Javascript: 画像がすでにキャッシュされているかどうかを確認する方法

画像のURLがプロンプトに入力されているかどうかを確認する方法-JavaScript

JavaScriptを使用してURLの＃ハッシュを確認するにはどうすればよいですか？

JavaScriptでキーの組み合わせが押されているかどうかを確認するにはどうすればよいですか？

Javascriptで特定のキーが押されているかどうかを確認する必要があります

If（）javascriptを使用して、クラスがクリックされているかどうかを確認するにはどうすればよいですか？

JavaScriptで画像が壊れた画像かどうかを確認する方法

Javascript特定のキーがクリックされたかどうかを5秒ごとに確認するにはどうすればよいですか？

URLスキームがJavaScriptでサポートされているかどうかを確認する

メールがFirebase認証、JavaScriptにすでに登録されているかどうかを確認するにはどうすればよいですか？

値がすでに配列javascriptに含まれているかどうかを確認する方法

javascriptのみを使用して要素がビューポートに表示されているかどうかを確認する方法はありますか？

参照がJavaScriptでリリースされているかどうかを確認する方法

Javascript-入力された画像のURLが実際に存在するかどうかを確認する方法

配列にJavaScriptで別の配列が含まれているかどうかを確認する方法

Javascript文字列に '\'が含まれているかどうかをincludes（）で確認する方法

ジオロケーションがJavaScriptで拒否されているかどうかを確認する方法はありますか？

Javascriptでボタンがクリックされているかどうかを確認します

JavaScriptで要素が本当に表示されているかどうかを確認するにはどうすればよいですか？

for / loopにキャッシュされるようにJavascript変数を宣言するにはどうすればよいですか？

Firebugがjavascriptとともにインストールされているかどうかを確認するにはどうすればよいですか？

Firefox WebExtensionがページJavaScriptでインストールされているかどうかを確認するにはどうすればよいですか？

関数がプレーンJavaScriptですでにバインドされているかどうかを確認するためのより良い方法は？

Laravel / Vagrant and Gulp：CSSファイルとJavaScriptファイルがどこかにキャッシュされているようです

JavaScript演算子がサポートされているかどうかを確認するにはどうすればよいですか？

すべてのフォーム要素がJavaScriptで入力されているかどうかを適切に確認する方法

javascript：コンテキストメニューの新しいタブでリンクがクリックされているかどうかを確認する方法

php内のjavascriptを使用してセッションが空であるかどうかを確認する方法

JavaScript関数が定義されているかどうかを確認する方法

JavaScript-SeleniumWebdriver。要素が表示されているかどうかを確認する方法