要素の画像読み込みを待つ。
Lazy Load対応。
$ npm i image-loaded-promise
import imageLoadedPromise from 'image-loaded-promise';
// or CDN, Dynamic import
const {default: Mod} = await import('https://cdn.rawgit.com/honeo/image-loaded-promise/master/image-loaded.min.mjs');
// img.srcを監視
await imageLoadedPromise(img);
// background-imageを監視
await imageLoadedPromise(div);
// PNG画像がURLに設定されるまで待ってから監視
await imageLoadedPromise(img, /\.png$/);
引数1要素の画像読み込みを監視する。
読み込み終了時に要素を引数に解决するpromiseを返す。
-
引数2に正規表現があるとき
- 要素にそれとmatchする画像URLが設定されるまで待機する。
-
既に要素の画像読込が終了しているとき
- 即座に解決する。
-
要素にsrc属性やbackground-Imageが未設定なとき
- 要素に画像URLが設定されるまで待機する。
-
MutationObserver - Web API インターフェイス | MDNを使っている。
- レガシー環境では要Polyfill.
- 同じような名前の他ライブラリ・モジュールとは一切関係ない。