スポンサーリンク

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

スポンサーリンク
HTML
スポンサーリンク

スポンサーリンク

概要

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

サンプルコード

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/

参考

ninoha.com
JavaScriptで複数画像のプリロード – SuganoMusic
HTMLJavaScript
スポンサーリンク
スポンサーリンク
スポンサーリンク
404 Motivation Not Found
タイトルとURLをコピーしました