1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

ES6のPromiseで画像の読み込み

画像を読み込むloadimgという関数を定義します。
この関数は引数srcURLを画像として読み込み、読み込みが完了したらresolveします。
resolveを呼び出すときにimg要素を渡すので、呼び出し側はこの要素を使って色々できるという感じです。
単純なコードですが、Promiseの威力がよくわかるコードだと思います。
また、async/awaitを使えばloadimgが完了するまで待機することができます。

let loadimg = ({ src }) => {
    return new Promise((resolve, reject) => {
        let img = new Image();
        img.onload = () => {
            resolve(img);
        };
        img.src = src;
    });
};

loadimg({
    src: 'http://localhost:8000/32x32.png',
}).then((img) => {
    console.log(`img: ${img}`);
    document.body.appendChild(img);
});

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
1
Help us understand the problem. What are the problem?