画像が読み込まれたか監視するjavascriptをnpmに公開しました

#　やりたかったこと
「シンプルjavascriptで画像の読み込みを監視し、
読み込み終わったらイベントを発火する」
という画像読み込みの監視クラス

使い方

npm
https://www.npmjs.com/package/load-image.js

$ npm install load-image.js

import loadImage from 'load-image.js';
 
const PATH_IMG = "/assets/img/";
let callbackEvent = () => {
    // fadein event
}
new loadImage({
    targetImageUrl : [
        PATH_IMG + `mv/background.jpg`,
        PATH_IMG + `mv/title.png`,
        PATH_IMG + `mv/image.png`,
    ],
    callback: callbackEvent
});

中身

var img = new Image();
で画像要素を作り、そこにロードイベントを追加して、
カウンターを回すだけのシンプルな作り。
念の為エラー吐いたときもカウンター回して、全部ロード完了orエラー吐いた状態で
コールバックが発生するようにした。

loadimage(target_img) {
  var img = new Image();
  img.addEventListener("load", () => {
    this.counter();
  }, false);
  img.addEventListener("error", () => {
    this.counter();
  }, false);
  img.src = target_img;
}