仕事でWEB制作している時に使ったもののメモ書きです。 年々回線速度はアップしているが、画像が多いページの場合は完全にページを表示するまでに時間がかかってしまうもの。
読み込んでいる間に右画像のようなローディング画面を表示する方法のうちなるべくお手軽なものを紹介。
画面全体を背景色で覆って、中心にgif画像を表示するタイプのローディング画面です。 必要な手順は4つ。
ヘッダーでjQueryの読み込み
まずは肝心のjQueryの読み込みタグを記述します。
※jQueryとはJavaScriptの中で使用頻度の高いものを一つの.jsファイルに集約したライブラリ。
上記を<head>内部に記述。 ページの表示速度向上のためにはフッター直前に挿入するのが推奨されていますが、ローディング画面を表示させる場合はこいつの読み込みが後回しにされては不味いのでヘッダーに記述しています。
jQueryの直後に<script>を記述
これがローディング画面表示のJavaScript。 内容はコメントに書いてあるとおりです。実際に使用する際には//～部分は削除しても構いません。
htmlにローディング画面のソースを記述
つぎに<body>直後にタグを挿入
img/now-loading.gif は自身で用意したファイルのURLを記述。
CSSを記述
最後に<div class="loadingWrap">のスタイルをヘッダー内に記述します。
実際に使用する場合は/*～*/を削除しても構いません。
margin: -69px 0 0 -69px;/*画像位置調整(-画像高さの半分 0 0 -画像幅の半分)*/
↑の部分についてはローディング画像が128×128pxの場合です。 画像の半分の高さと幅をマイナスすることで画面中央に表示させます。
完成形のソース
画像は を使用しています。
著作権フリーとしますのでよろしければ保存してお使いください。
以上、ホームページ読み込み時にローディング画面を表示させる方法 でした。 ご質問などありましたらお気軽にコメントください。
