はじめに
どうも、さいほうへいきです。Motchiyって誰だろう……。
僕は最近ブラウザ上で動く小さなゲームを作ってみているのですが、その時に表示される画像の読み込みに若干時間が取られ、タイムラグができてしまうんですよね。
当たり前だけど画像の表示が遅いとプレイして違和感しかないわけで、プリロード、つまり事前に画像をすべて読み込んでおきたい……という。
やり方がすごく簡単だったので、軽くまとめておきたいと思います。
やり方
最初の方にこれを走らせるだけです。
const images = ['画像A.png', '画像B.png', '画像C.png', ...];
images.forEach(src => {
const img = new Image();
img.src = src;
});
やっていることはただ単にすべての画像を一度Imageのインスタンスとして作っているだけなんですが、これでローカルに画像がキャッシュされてくれます。
そしたら実際に画像を使う時にはキャッシュから読み込めばいいため、タイムラグもなくなるわけですね！
まとめ
というわけでバカ短い記事になってしまいましたが、そこそこ役に立つテクニックだと思うのでぜひ活用してみてください。
じゃあね！