MB-Support

パソコン初心者のサポートページ

 カテゴリ:
 

Loading GIF 画像をダウンロードできる Ajaxload - Ajax loading gif generator



 2007 年 2 月 16 日 (金)

この紹介の仕方が正しいのかどうか不明ですが、ホームページなどで読み込み中である事を知らせる Loading 画像を、Ajax を利用して作成できるサイトです。


Ajaxload - Ajax loading gif generator

Loading を示す描写はいろいろありますが、例えば右の Windows Update の Loading は、進捗状態を表しています。 Windows Vista からは、それまでの進捗だけを表す描写から、動作が停止していないかを判断できる表示へと変更されています( 緑の帯が左から右に進むだけではなく、Loading 済みの部分も右から左に流れます )。


一方、ホームページで利用される Loading を示す描画は、例え帯上のものであっても、進捗を表すものよりも、読み込み中である事を表すものが多く利用されています。 これらは、現実的に作業の進み具合を表すものでは無いので、最近では ループ が多いです。 そして、単純にGIFアニメーションや Flash を利用したもので、一度読み込まれてしまえば、作業が止まっていたとして、あたかも作業中であるかの様にアニメーションが繰り返されます ( ここでの Flash とは、Flash で制作されたページではなく、 Flash で制作されたアニメーションを指します ) 。


最近は、JavaScript を利用して、特定のリンクを左クリックすると、指定された部分にデータを表示する事が多くなりました。 この読み込み時に、クライアントに対して読み込みが発生している事を知らせるものが Loading 画像になります。

仕組みは簡単で、アクションと同時に肝心なデータを読み込む前に、表示するエリアに Loading 画像を読み込みます ( ダウンロードさせる ) 。 目的のデータが抽出され、表示が可能になった時、Loading 画像が表示されたエリアに、データを吐き出す事で上書きされます。


Indicator Type で、アイコンの種類を選択します。これは、実際に作成してみるのが一番です。 Bacground color は、Indicator Type で指定したアイコンのバックグラウンドの色をカラーコードで指定します。 サイトの背景色と同化させる時に利用します。

Transparent background の左にチェックを入れれば、透過GIFを作成できます。 これにより、サイトの背景色を気にする必要はありません。 Foreground color は、アニメーションする部分の色をカラーコードで指定します。つまり、Bacground color と Foreground color を同じにすると、全く意味がないアイコンとなります。


最後に「 Generate it ! 」ボタンを左クリックすると、下段にプレビューが表示され、「 Download it! 」を左クリックすると別ウインドウに作成したアイコンが表示されます。

Ajax を利用しているので、カラーの微調整などが簡単で、プレビューされたアイコンが気に入らなければ、何度でも変更できます。 ( パレット が表示されると、もっと便利ですね )


カテゴリ : ホームページの作り方 / 4その他


投稿パネルを開く

[ コメント数 0件 ]