ページ読込中のローディングイメージを表示する方法
はじめに
ページをロードする時間は、画像や外部ファイルの大きさが影響します。
最適化を施したとしても、表示されるまでの待ち時間はユーザーにとってストレスですよね。
1秒待つのも苦痛に感じてしまったりします。（大袈裟ではありません）
それを少しだけ緩和するのが「Loading」イメージです。
誰しも見たことがあるはずです。
例えばこんな感じ。
とか
Loading
など。
これがあると、ユーザーのストレスを少しでも緩和してくれる効果が期待できます。
今回は、このLoadingイメージを実装していきます。
Loadingイメージの実装方法
Loadingイメージを準備する
基本的にはgifアニメーションファイルを使いますが、CSSでも表現できます。
イメージを用意するには、私の独断ですが下記２つのサイトが便利です。
gifアニメーションの場合。
CSSの場合
gif、CSSいずれかのLoadingイメージを用意をしてください。
HTMLへの記述
gifアニメーションの場合、例えば下記のように記述します。
（ここではWordPressのテーマフォルダ内のimagesフォルダに「loading.gif」を入れた場合）
|
1 2 3 4 5 6 7 |
<div id="loading"> <img src="<?php bloginfo('template_url'); ?>/images/loading.gif" alt="loading..."> </div> <div id="container"> ページ内容 </div> |
CSS（先述のloadingアイコンメーカーを使用）の場合は、下記のように記述します。
（class = “loading” のクラス名は、アイコンメーカーでどのアイコンを使用するかで変わってくるので注視してください。）
|
1 2 3 4 5 6 7 |
<div id="loading"> <div id="loading"><span class="loading"><span></span></span></div> </div> <div id="container"> ページ内容 </div> |
CSSへの記述
はじめは#containerを非表示にして、#loading（Loadingイメージが入った部分）を画面中央に配置しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* loading */ #container{display:none;} #loading{ position:absolute; left:0; right:0; top:0; bottom: 0; margin:auto; width:xxxpx;/*任意の値*/ height: xxxpx;/*任意の値*/ } |
javascriptの記述
これは、外部ファイル（.js）への記述でも、内部記述でも、どちらでもOKです。
|
1 2 3 4 5 6 |
window.onload = function(){ $(function() { $("#loading").fadeOut(); $("#container").fadeIn(); }); } |
これで実装完了です。
まとめ
PCでサイトを見る際には、多くの場合ブロードバンドが充実していて、速度もそれほど気にならないかと思います。
表示速度が気になるのは、やはりスマホの場合ですね。
スマホでサイトを見るユーザーの為にも、このLoadingを施すことによって、より親切なサイトと見なされるのではないでしょうか。
是非、お試しください^^
公開日：2018年10月3日
最終更新日：2018年10月3日
