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

えっ、当然ブロードバンドっすよ、何か？みたいな世の中なんで、果たしてどれくらい効果があるのか分からないのかも知れないんだけれども、ちょっとばかし重たい画像があったとして、その画像の読み込み中に味気ない空白を見つめているよりは、読み込み中を表すインジケータのアニメーション GIF を用意して img 要素の背景画像に指定しておけばナローバンドな環境にも配慮できるでしょ？（超意訳）みたいな小技が maratz.com » archive » Image Preloader で大分前に紹介されてたのを見つけたんでやってみた。 重い画像を読み込む際のインジケータをCSSで表示のサンプル img { display: block; background: #fff url(progressbar_long.gif) center center no-repeat; } 全然、分かんね。Ctrl+F5

[tsukkee]

背景見えたorz

[webmarksjp]

css

[smallkey]

CSS

[OhYeah]

単純だけれどもなるほど

[miya2000]

この背景画像を読み込む際の(ry

[teru_while]

アニメーションGIFをimgのbackground-imageに指定して、それっぽく見せると。おもろいアイデアだねぇ。

[wablog]

インジケータ画像を img の background-image に指定して画像のローディングのストレスを軽減。

[ysk_lucky-star]

どっかで実践してたサイトがあったな

[ochanoco_naoco]

なるほどねー。使う機会なさそうだけど。

[s1090018]

[desn

[sst]

背景にgifアニメの軽いインジケータ画像を置いておくことで、重たい画像とかのローディングを表現

[adamrocker]

画像の背景に軽いインジケータを設置しておけば、読み込み中ですよ！ってのが明示的になってストレス軽減ってテク。簡単に設置できるのがステキ。

[bigwest]

ファイルアップロードの時にも使えるかな

[HISAMATSU]

プログレスバーみたいなのを表示できたら、かなりストレスはへるのだけど、難しいなぁ。

[nitoyon]

サイズの大きい画像の背景に、Loading 用の画像を表示するテクニック。

[hiro_y]

画像の背景にloading画像を指定、読み込み時にちょっと表示。

[picnicgraphic]

「画像の読み込み中に味気ない空白を見つめているよりは、読み込み中を表すインジケータのアニメーション GIF を用意して img 要素の背景画像に指定しておけばナローバンドな環境にも配慮できるでしょ？」

[lomo_lomo]

読み込み中のアニメーションGIFをimg要素の背景画像に指定