0

読み込み完了までローディング画像でストレスを軽減する方法

読み込み完了までローディング画像でストレスを軽減する方法

ギャラリーページなど大きい画像を並べていたり、パララックスサイトのように1ページあたりの容量が比較的大きくなるようなページ構成をすると、ユーザー環境によっては配置されている画像が徐々に表示されたり、コンテンツがバラバラに表示されて崩れてしまったり、予期しない表示崩れなどが起こってしまうことがあります。

閲覧しているユーザー視点に立ってみると、スムーズに表示されないページに対して苛立ちを感じる人は多いと考えられます。

ほんのちょっとした引っかかりでページ離脱してしまう原因になることがあるので、イライラを軽減するために、「ローディング画像」を表示して、ストレスを軽減する緩和剤を加えていきます。ページ全体が表示されるまでにかかる時間は同じであっても、「ローディング中」であることをきちんと明示してあることで、わずかな安心感を感じ、少し待ってみようと感じさせる効果があります。

今回は、jQueryを利用したローディング画像の表示を確認していきましょう。

 

 

DEMO

 

画像を用意する

▼ページ内に表示する画像をサンプルとして5つ用意しました。

01 02 03 04 05

▼ローディング用の画像として「loading.gif」を用意しました。

loading

 

HTMLを記述

 ページの読み込みがすべて完了するまでの間に表示する「loading.gif」と「空要素」を先に記述しておきます。そして#containerの中に5つの画像をリストで並べて配置しています。

 

CSSを記述

 JavaScriptをoffにしているユーザー対策として、ページを開いたときのデフォルトでは「#loader」と「#fade」は、display:none;で非表示にしています。また、#loaderで囲った「loading.gif」の位置は、ウィンドウの中央に配置するように指定します。

 

外部JavaScript「loading.js」を記述

 

jQuery本体とloading.jsを読み込む

 

以上で完成です。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > 読み込み完了までローディング画像でストレスを軽減する方法