Chrome Packaged Appsで、スライドショー部品を作成。(HTML5/canvas) 2014-06-19

梅雨ですね。
HTML5で、スライドショー部品を作成してみます。

[前おき]
スライドショー部品で、jQueryプラグインを使用していたのですが、
画像の数が多くなると、読込み起動が重たくなる場合があり。
対策で別ライブラリ等を探したのですが。結局、HTML5で自作する事にしました。
(初期化で、ブラウザ画面内のIMGタグなどに、全画像配置する仕組みが重かったようです)

[主な要件]
1) 1画像づつスライドさせる。
2) １画像を通信して取得後完了後、アニメーションを開始。
*) 目安目標で、大きめの画像(500KB以上) 100-150 枚程度を、永久ループ可能。

[Screen]

[source code]
Github : https://github.com/kuc-arc-f/chrome_slide

初期データの配列作成します。　get_slideData()
スライド部品のインスタンスを作成し、
間隔＝ミリ秒
配列データ(URL etc)
canvas width
canvas height
を渡す。

XMLHttpRequest　で画像を取得
Imageのロードのコールバック内から
アニメーションを開始させる。


アニメーション処理。
タイマで起動、画面左の端でアニメ終了＞　次の画像の処理＞LOOP
*) 各描画間隔＝20 msecですが、10 -15msecでも良いかと思います。

*) 画像読込みを、１画像づつで。メモリ消費は減らせた気がします。

[update 2014-06-19 13:11]
続編のHTML5版も追加しました。
http://knaka0209.blogspot.jp/2014/06/html5-canvas-2014-06-19.html