uu.image() で画像の読み込み管理

ちょっとI/F修正

uupaa.js の個々の機能をちょっとずつ紹介しています。

uu.image(url:URLString/URLStringArray, callback:Function)
//  [1][load image]  uu.image(url,        function(response) { ... })
//  [2][load images] uu.image([url, ...], function(response) { ... })

uu.image は画像をまとめてプリロードし、終わったらお知らせしてくれる機能です。

uu.image は、第一引数 url で指定された画像の読み込みが完了すると、第二引数 callback で指定された関数を callback(images, ok) の形で呼び出します。response.rv には NodeArray が、 response.ok には Boolean 値が格納されています。
読み込みに失敗すると処理を中断し callback を呼び出します。

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8" /><title></title>
<script src="src/uupaa.js"></script>
<script>
var src = [
    "test/images/cover01.jpg",
    "test/images/cover02.jpg",
    "test/images/missing.jpg"  // 存在しない画像、読み込みに失敗する
];
uu.image(src, function(response) { // @param Hash: response
                                   //   response.rv - NodeArray: [<img>, ...]
                                   //   response.ok - Boolean: true is success
  if (response.ok) {
    uu.log("全画像の読み込み成功。画像数 @個", response.rv.length);
    uu.add(response.rv); // <body>の子としてまとめて追加
  } else {
    var ary = response.rv.filter(function(img) {
      return img.ok; // オレオレ属性 img.ok に個々の成功/失敗が格納されている
    });
    uu.log("いずれかの画像の読み込みに失敗。読み込み成功 @個, 読み込み失敗 @個",
           ary.length, response.rv.length - ary.length);
    uu.add(ary); // 成功した画像だけを <body> に追加
  }
});
</script>
</head><body></body></htm

<canvas> の drawImage() で使う画像は事前に読み込みを済ませておく必要があり、そのような場合に uu.image() は便利に使えます。

var ctx = canvas.getContext("2d");
var src = [
    "test/images/cover01.jpg",
    "test/images/cover02.jpg"
];
uu.image(src, function(response) {
  if (response.ok) {
    response.rv.forEach(function(node, i) {
      ctx.drawImage(node, i * 50, i * 50); // 50px の倍数の位置に斜めに画像を配置
    });
  }
});

uu.image と uu.junction を組み合わせて使用すると、複数の画像をひとまとめにした(ユニット)単位で、読み込み完了を管理することもできます。

var unit1 = [
    "test/images/cover01.jpg",
    "test/images/cover02.jpg"
];
var unit2 = [
    "test/images/cover03.jpg",
    "test/images/cover04.jpg"
];

var jc = uu.junction(2, 2, function(response) {
  if (response.ok) {
    uu.add(response.rv[0]);
    uu.add(response.rv[1]);
  }
});
uu.image(unit1, function(response) { ok ? jc.ok(response.rv) : jc.ng(response.rv); });
uu.image(unit2, function(response) { ok ? jc.ok(response.rv) : jc.ng(response.rv); });

uu.junction を利用すると、画像の読み込み完了 + 何か処理が完了などといった非同期に発生する複数のイベントをひとまとめに管理することも可能になります。

簡単ですね。

Web的な利用方法においては、細かなエラーハンドリングを伴なうケース(画像の読み込み失敗を詳細に知りリカバリーする)よりも、おおざっぱに成功/失敗が知れればOKなケースが多いはずですので、そのようなケースで便利に使えるように機能をデザインしています。