【javascript】画像のプリロード

javascriptでスライドショーなどの型式で画像を取り扱うとき、ボタンのイベントに応じて切り替わった画像を先に読み込んでおく「プリロード」を使うことが有効です。イベントがあった際に画像の読み込みにかかる待ち時間が発生しなくなります。

■サンプルコード

<script>
  'use strict';

  const images = ['images/image1.jpg', 'images/image2.jpg', 'images/image3.jpg']
  images.forEach(function(item, index){
    preloadImage(item);
  });
  function preloadImage(path){
    let imgTag = document.createElement('img');
    imgTag.src = path;
  }
</script>

createElementは()内のタグ名を持つ要素を生成して、メモリの保存します。
HTMLに表示されることはありません。

その次の行で変数imgTagに代入された<img>要素のsrc属性に、配列imagesに登録した画像のパスを指定しています。

この処理を行うことで、ブラウザは指定されたパスの画像をダウンロードし、キャッシュします。