JSで画像をまとめて読み込む(プリロードする)

目次

1. 概要
2. サンプルコード
3. デモ
4. 参考

概要

JSで画像をまとめて読み込む方法(プリロード)の紹介 JSのImageAPIのonloadを使って、複数の画像の読み込み完了時にイベントを発火させる方法です。

asyncを使った方がベターですが、ここでは使いません。

サンプルコード

let imagesUrl = [
  '/path/to/image/a.png',
  '/path/to/image/b.png',
  '/path/to/image/c.png',
  // ...
];
let images = new Array(imagesUrl.length);
let loadingCount = 0;

const mainEvent = () => {
  // 画像読み込み完了時の処理を書く
  console.log('complete');
};

for (let i = 0; i < imagesUrl.length; i++) {
  images[i] = new Image();
  images[i].src = imagesUrl[i];
  images[i].crossOrigin = 'Anonymous';
  images[i].addEventListener('load', () => {
    loadingCount++;
    if (loadingCount === images.length - 1) {
      mainEvent();
    }
  });
}

デモ

このデモは指定した画像が全て読み込み完了となった時に、canvasに描画するというものです。

コード https://jsfiddle.net/s_yoshiki/knzrj13o/

参考

http://ninoha.com/?p=77

https://suganomusic.com/20141009/14