画像の読込完了まで、ローディング画像を表示する方法

まだ読み込めていない画像の箇所を、読み飛ばされないように

画像の読み込みが完了するまでの間、画像が表示される予定の領域に、右図のような「読み込み中」であることを示す「ローディング画像」を表示させてみてはいかがでしょうか。

ローディング画像が表示されていると、「そこに確実に何かが表示されるはずだ」ということが伝わり、表示の完了前に読み飛ばされてしまうことを防げるかもしれません。

このようなローディング画像の表示に、スクリプトは不要です。小さな画像を用意し、短いスタイルシートを記述するだけで簡単に実現できます。

画像が読み込み途中であることを示す「ローディング画像」を表示するには

画像の掲載領域に「ローディング画像」を表示する方法は、とてもシンプルです。その方法とは、

1. 「ローディング画像」を用意し、
2. それを「画像の背景画像」として指定する

……というだけです。とても単純ですね。

「画像に対して、さらに背景画像を加える」というと、ずいぶん特殊な装飾のように感じられるかも知れません。しかし、実際には特殊でも何でもなく、スタイルシートで一般によく使われている記述方法で実現できます。

img要素にも背景画像を指定できる

p要素やdiv要素などのブロックレベル要素には、背景色や背景画像を指定することができます。また、a要素やspan要素などのインライン要素にも、同様に背景色や背景画像を指定できます。

それらと同じように、画像を表示するための「img要素」にも、背景色や背景画像を指定できます。もちろん、画像に背景色や背景画像を指定しても、(画像が表示されればそれらは見えなくなるので)あまり意味がありません。しかし、逆に言えば「画像の表示が完了するまでの間は背景が見える」ということでもあります。

このことを利用すれば、「画像の読み込みが完了するまでの間」だけ、(背景画像として指定した)「ローディング画像」を見せることができます。

画像(img要素)に、背景画像(background-image)を指定するには

画像に背景画像を指定する方法は、他の要素に背景画像を指定する方法と全く同じです。img要素に対して、スタイルシートでbackground-imageプロパティを指定するだけです。

次のページでは、具体的なソースをご紹介するほか、ローディング画像そのものを簡単に作る方法や、ローディング画像の表示位置を調整する方法を解説致します。

それでは次のページで、実際にローディング画像を作って、掲載してみましょう。