画像読み込みの遅延に伴なうストレスを緩和する

ダイアルアップ→ISDN→ADSL→光…と、個人向けのインターネット回線もずいぶん向上したものです。
しかし、WEBホスティング側の転送速度が遅い場合や、高画質な（重い）画像を載せたりした場合、閲覧者側の回線がどんなに早くてもWEBページ上の画像表示に遅れが生じることがあります。
画像の読み込みを向上させる方法としては、そのためのスクリプトやツールも公開されていますが、面倒な作業が伴ったりバグが起こったりと一長一短です。かと言って、サーバ自体を乗り換えるなんてのもコストと労力が掛かります。

というわけで、今回ご紹介するのは、あえてその遅延と上手く向き合っていくための方法です。
端的に説明すると、画像を読み込む場所に予め「ローディング中」と分かるアニメーションGIF（よく見るAjaxライクなあれです）を表示して、実際に画像が読み込まれるまでの遅延時間の「場つなぎ」を行うのです。

つまり、こんな感じになります↓↓

ファイルサイズの小さいローディングGIFの方が他の重い画像より先に読み込まれるという特性を利用したTIPですね。

基本的には、ただの「気休め」程度のものなのですが、心理的に「お、読み込んでる、読み込んでる」という安心感を与えることでストレスと「本当に読み込んでるの？」という不安を緩和させることができるかもしれません。

実装は至って簡単です。
CSSに、

img {
background: url(http://naturalogy.net/sign/loading.gif) #fff center center no-repeat;
}

を追加するだけです。

もちろん抜本的な対策ではないので、「やらないよりはマシ」程度にご活用下さい。

※アニメーションGIFをお持ち帰りする方は を右クリックで保存。