Tag: webapp
Autorotate your avatar
What if you have multiple images to use for your avatar? They're all great, and you want to use them all! But you can only use one at a time.
画像のプリローダーを使ってみよう！
Webアプリっぽいものを作るときは、画像などのリソースを読み込むタイミングが、ページを表示したタイミングと同じではなく、ユーザーがボタンを押したり、何かのイベントが始まったり終わったりなど、 任意のタイミング である場合が多いです。 Flashなどのコンテンツでは、最初にページを開いたタイミングで、0%〜100%までのローディング表示が行われますね。 FlashコンテンツがHTMLベースのコンテンツにどんどん置き換わっている 昨今では、こういったローディングの機能も、HTMLベースのコンテンツに求められてきています。 そうしたときに、画像などのリソースを一旦裏で読み込んでおいて、読み込み終わったものから順に表示したり、あるいはすべて読み込み終わったタイミングで一斉に表示したりといった、いわゆる**「プリローダー」の役割を持ったものが必要**になってきます。 ってことで、プリローダーをいろいろ試してみようと思います。 プリローダーとは 画像に限らず、「あらかじめ」「ローディング」しておく役割のものを「プリローダー」と呼んでいますが、特に画像に限る必要もないのでは？と思います。 プリローダーの仕組みは、大抵以下のような感じです。 必要なリソースのURLを一通りプリローダーに登録する 1ファイル、全ファイル読み込み終わったときの処理をそれぞれ書く プリローダーをスタートさせる シンプルですね。 まず 1.で、例えば新たに表示したいパーツに使う画像などのリソース一式のURLを、配列などに保存しておきます。もちろんそのプリローダーごとに方法は様々だと思いますが。 続けて 2.で、1ファイル読み込み終わったときの処理を記述します。ここでどんな処理を書けばいいかというと、例えば・・・画像を次々に読み込んで、1ファイル読み込み終わったタイミングで都度HTMLに埋め込んで表示するような、動的な見せ方をするコンテンツなどの処理を書くことができます。 また、全ファイル読み込み終わったときの処理も記述します。画像を一通り読み込み終わってから、まとめて表示したり、すべて読み込み終わった後で何か別の処理をさせたいときなどに使えそうです。 そして最後に 3.で、用意したプリローダーをスタートさせ、実際の読み込みを開始します。 今回は、以下の3つのJavaScriptライブラリ、jQueryプラグインを試してみました。 PxLoader Query.ImgLoader jquery.imgpreload 全部まとめて検証用ページ作って試してみました。 画像数が少ない場合と多い場合とで両方試してみたかったので、とりあえず画像数を10から1000まで切り替えられるようになっています。 ※同じような画像を使っていますが、すべて別ファイルとしてリネームされたものを読み込んでいます。 順に実装の仕方や、試してみた感想などをメモしておきます。 PxLoader PxLoader PxLoader is a simple JavasScript library for creating preloaders and resource downloaders for HTML5 … thinkpixellab.com var loader = new PxLoader(); for (var i = 0; i < imageTotal; i++) { // ここでプリローダーに登録する var imageFile = new PxLoaderImage(imageURLList[i]); loader.add(imageFile); } loader.addProgressListener(function(event) { // ここに1ファイル読み込み終わったときの処理を書く // event.resource.getName() で画像URL参照できる }); loader.addCompletionListener(function(event) { // ここに全ファイル読み込み終わったときの処理を書く }); loader.start(); 概要 PxLoader という、jQueryなどの基本ライブラリには依存しないJavaScriptライブラリです。