個別記事

前後の記事

重い画像を読み込む際のインジケータをCSSで表示

この記事が属するカテゴリー
CSS

えっ、当然ブロードバンドっすよ、何か？みたいな世の中なんで、果たしてどれくらい効果があるのか分からないのかも知れないんだけれども、ちょっとばかし重たい画像があったとして、その画像の読み込み中に味気ない空白を見つめているよりは、読み込み中を表すインジケータのアニメーション GIF を用意して img 要素の背景画像に指定しておけばナローバンドな環境にも配慮できるでしょ？（超意訳）みたいな小技が maratz.com » archive » Image Preloader で大分前に紹介されてたのを見つけたんでやってみた。

img {
  display: block;
  background: #fff url(progressbar_long.gif) center center no-repeat;
}

全然、分かんね。Ctrl+F5 とか連打しても、なんか動いてないような気が。

背景画像に指定しているアニメーション GIF
インジケータ
AJAX Activity Indicators から拝借

2007-01-27T17:05:40+09:00 | コメント (6) | トラックバック (0) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/398

"重い画像を読み込む際のインジケータをCSSで表示"へのトラックバックはまだありません。

コメント

ma☆ce さんからのコメント

う～ん、微妙（笑
使われている画像のせいかもしれませんが…

あっ、始めまして。
ちょくちょくロムらせて頂いております。m(_ _)m

2007年01月27日 17:51
Milli さんからのコメント [TypeKey Profile Page]

はじめまして。
こちら ADSL1.5M 損失30db ですが、3秒間程アニメーション GIF が表示されています。
サンプルが正常だということはわかりましたが、うちの回線が遅いということもよくわかりました・・・。

2007年01月27日 18:15
e-luck さんからのコメント [TypeKey Profile Page]

>>ma☆ce さん
はじめまして。これからもよろしくです。
うーん、やっぱ微妙ですよね。画像かなぁ。

>>Milli さん
ご報告ありがとうございます。
そうですか、かける言葉が思いつきません（笑

2007年01月28日 03:11
kz さんからのコメント

初めまして。いつも拝見させてもらっています。
10秒たっても、インジケータが隠れないのにはさすがにショックを受けましたが、Fx2.0、IE7で動作を確認しました。
インジケータが隠れてしまうと何も表示されないのは悲しいので、画像領域全体に表示されるギミックでも面白いかもしれませんね!
ちなみに、画像がロード完了されるまでに32秒掛かりましたorz...

2007年01月29日 04:02
hiloki さんからのコメント

はじめまして！面白いアイデアですね！
ただ読み込む画像よりも、この背景の方が重かったら意味ないですね笑
どっかでこのtipsを使ってみたいとおもいます。

2007年01月29日 19:01
e-luck さんからのコメント [TypeKey Profile Page]

>>kz さん
そうですね、たしかにインジケータが隠れてしまうとアレですよね。
せめて真ん中より下側に配置した方が良いかもしれませんね。
ちなみに、わざとロードが重くなるようにしてかなり重い画像を配置してたりします。>32秒

>>hiloki さん
ありがとうございます。
GIF だとそうそう重くはならないとは思いますが、確かに重かったら意味ないっすね :-)

2007年01月29日 22:29

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)