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