ページのローディング画面を作成する

第10回目ウェブラボ技術メモです。

今回はjQueryを使って、ページが読み込まれるまで表示されるローディング画面を作ります。

 

ページの表示速度が遅いのは、ユーザーが見るのをやめてしまう大きな原因になってしまいます。そこで、少しでも待ってもらう為にページの読み込み状況を表示させたいと思います。

 

参考にさせて頂いたサイトはこちら。では早速実装してみましょう。

 

HTMLのhead内はjQueryの読み込みと一緒に以下の記述をします。

■HTMLhead内

ページが遅くなる大きな原因は画像なので、あらかじめjQueryで画像を読み込んでおき、読み込み終わったらHTMLに画像の記述を出力します。

 

HTML本文に必要な記述は以下の通りです。

■HTML本文

この記述を設置したい場所に入れます。

 

次にCSSにローディング画面のレイアウト情報を記述してあげます。

■CSS

CSSはお好みで変更して頂いて大丈夫です。フォントや色など自分好みに変更するのも可能です。

 

必要な記述は以上です。完成したデモはこちらです。

 

いかがでしょうか?デモをリロードしてあげると1回目とローディングのスピードが違いますね。

これはブラウザにキャッシュが保存され読み込み時間が短くなっているせいです。また1から見たい場合はブラウザのキャッシュを消してあげて下さい。

 

気になる対応ブラウザですが、Firefox,Chrome,Safari,Operaで動作確認済みです。

IEでは画像サイズの高さ、幅が取得されずおかしく表示されてしまうので別途で画像サイズを指定してあげる必要がありそうですね。

 

以上ウェブラボ技術メモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。