重い画像を読み込む際のインジケータを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 から拝借

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: https://www.lucky-bag.com/mt/mt-tb.cgi/15

Comments

ma☆ce said:

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

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

Milli said:

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

e-luck said:

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

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

kz said:

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

hiloki said:

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

e-luck said:

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

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