プログレスバーの実装もこれなら簡単！複数ファイルにも対応した超軽量JavaScriptライブラリ -preload-it

サイト構築 -JavaScript

Post on:2018年11月8日

preload-itの特徴

preload-itは動画や音楽や画像ファイルなど、複数の異なるファイルをロードする際のイベントを取得して、プログレスバーなどを簡単に実装できます。

複数の異なるファイルに対応

XMLHttpRequest2対応で、さまざまな種類のデータを処理できます。
異なる複数のファイルを平行にロードする際もサポート。
1kbの超軽量スクリプト。
他のJavaScriptやライブラリへの依存は無し。
MITライセンスで、個人でも商用でも無料で利用できます。

preload-itのデモ

デモページでは、実際の動作を確認できます。

デモページ

preload-itの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<script src="https://unpkg.com/preload-it@latest/dist/preload-it.js"></script>

1	<script src="https://unpkg.com/preload-it@latest/dist/preload-it.js"></script>

Step 2: JavaScript

スクリプトを初期化し、プリロードするファイルを指定して、実行します。

const preload = Preload();

preload.fetch([
    'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
    'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    'https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg'
]).then(items => {
  // use either a promise or 'oncomplete'
  console.log(items);
});

preload.oncomplete = items => {
  console.log(items);
}

preload.onprogress = event => {
  console.log(event.progress + '%');
}

preload.onfetched = item => {
  console.log(item);
}