JSで画像をまとめて読み込む(プリロードする)
2019-05-063 min read
目次
概要
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/
参考
Recommends
New Posts
Hot posts!
Date
Tags
(110)
(54)
(54)
(47)
(45)
(36)
(30)
(29)
(24)
(24)
(22)
(21)
(21)
(20)
(19)
(17)
(16)
(16)
(15)
(14)
(12)
(12)
(12)
(12)
(12)
(12)
(11)
(10)
(10)
(10)
(10)
(10)
(9)
(9)
(8)
(8)
(8)
(8)
(7)
(7)
(6)
(6)
(6)
(6)
(6)
(5)
(5)
(5)
(5)
(4)
Author