1. lab.jsでの画像のpreloading

lab.js で大量に画像を使う実験を行うと，参加者の通信状態によっては画面が真っ白になって先に進まないといった問い合わせがくることがあります。その場合には，ブラウザを閉じて，再度実験実施用のURLにアクセスすることで対処をしていました。

原因としては，通信状態があまり良くない場合に，画像がキャッシュにダウンロードされる前に画像を描画するプログラムが読み込まれてしまい，画像のURLが見つからずにエラーになってしまうのだと思われます。

これを防ぐために，実験プログラムの開始前にpreloadingを行い，それが終わってから実験プログラムが開始されるようにしたいと思います。

2. preloading用のプログラム

このプログラムでは，JavaScriptのPromiseという命令を使って，ファイルの読み込みが終わるまで待つ非同期処理を行います。すべての画像ファイルが読み込み終わるのを待ってから，「次へ」ボタンを表示します。

このテンプレートでは，画像ファイルの事前読み込みを行います（テンプレートの中身を変えたい場合は右上の「・・・」をクリックしてください）。このテンプレートで扱えるファイル名は「0.png」や「99.png」といった連番の数字＋拡張子で表現されるファイルです。

staticフォルダに画像ファイルをアップロードしてください。
このpreloadingテンプレートを一番上に表示してください（全体のLoopコンポーネントよりも上に）
連番の最初の数字「startN」と最後の数字「endN」，拡張子「ext」を指定してください。（左側のパラメータ名は変えないでください。scriptsタブ内では，「this.options.startN」として使用されます）

実験を実行すると，プログレスバーが表示され，100%になると「画像ロード完了！」と表示されます。「次へ」を押すと実験が開始します。

実行すると以下のように表示されます。