HTML5 canvasで、スライドショー部品を作成。 2014-06-19

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

全編の
http://knaka0209.blogspot.jp/2014/06/chrome-packaged-appshtml5canvas-2014-06.html
chrome Appsのスライド部品の続編です。
HTML5版に一部修正しました。

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

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

[Screen]

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

起動画面
https://github.com/kuc-arc-f/h5_canvas_slide/blob/gh-pages/top.html


ブラウザから、XMLHttpRequestを一部設定変更を除き使えないようで
Image.src 属性で直接ＵＲＬ指定します。
コールバックからのアニメ起動は同じ。
==========================
var image = new Image();
image.src = item.url + '?' + new Date().getTime();
image.onload = function() {
  CustomSlide.start_anim( image, mNUM_TIMER );
}
==========================