画像の先読み(少し応用)

基本で見たサンプルでもいいのですが、配列の形で指定できるとなお便利です。つまり、このようにです。preload(["画像A", "画像B", "画像C"]);
しかしそう考えていくと、どちらの形でも指定できると、なお便利です。つまり、以下のようにです。

これを実現する為には、preload()関数内で、引数が配列かどうかを判断して、適切に処理しなければなりません。 ここでは、引数全てを新規の配列に全て格納して、(つまり一旦フラットな配列にして)その配列をループして画像を先読みすることにします。 ここで何気に役に立つのが、jQueryの$.map()ユーティリティ関数です。早速見てみましょう。

$.map()ユーティリティ関数は、第1引数に指定した配列又はオブジェクトの各アイテムに対し、第2引数に指定した関数を実行していき、その関数内からreturnしたデータを新しい配列として返します。そして、$.map()ユーティリティ関数の特徴の1つに、配列をreturnした場合は、その個々の要素で配列が構成されるというのがあります。ですのでこれで、imgsには、配列も展開済みの画像ファイルが取得できるので、それに対して画像先読み処理をします。ここでは、$.each()ユーティリティ関数を使用しています。 $.each()ユーティリティ関数の場合は、各要素をthisで参照できるので、それを利用しています(第2引数を使う手もあり)。逆に、$.map()ユーティリティ関数では、第1引数を利用してやらねばなりませんでした。(この点、統一性が無いのが少しややこしい所です…)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です