【コピペでできる】画面読み込み中にローディング画像を表示するjQuery
たくさんの画像を表示するようなWebページなどは、画面を読み込むまでに時間がかかり、サイト閲覧者にストレスを与えてしまう可能性があります。
そんな時は、読み込み中であることがわかる「ローディング」を表示し、サイト閲覧者にストレスを感じさせない工夫をすると良いですよね。
そこで、画面読み込み中はローディング画像を全面表示させる、jQueryの書き方をご紹介します。
デモ画面
では、まずデモ画面をご覧ください。
デモ画面へ
アクセスすると、ローディング画像を表示、読み込み後、その画像が消えて、コンテンツが表示されるといったものです。
HTML
htmlは下記のような感じで。
1 | <div id="loader-bg"> |
2 | <div id="loader"> |
3 | <img src="load.gif" width="80" height="80" alt="Loading..." /> |
4 | <p>Loading...</p> |
5 | </div> |
6 | </div> |
7 | <div id="contents"> |
8 | お待たせーーー。 |
9 | </div> |
ローディング画像は自分で用意する必要がありますが、本サイトでも紹介した、無料でおしゃれなローディング用画像をダウンロードできるサイトを活用することをオススメします。
1 | <div id="loader-bg"> |
2 | <div id="loader"> |
3 | <img src="load.gif" width="80" height="80" alt="Loading..." /> |
4 | <p>Loading...</p> |
5 | </div> |
6 | </div> |
↑ここでローディング画像を表示する内容を指定してます。
1 | <div id="contents"> |
2 | お待たせーーー。 |
3 | </div> |
↑こっちが、ローディング後表示するコンテンツですね。
CSS
続いてCSS。
01 | #loader-bg { |
02 | display: none; |
03 | position: fixed; |
04 | width: 100%; |
05 | height: 100%; |
06 | top: 0px; |
07 | left: 0px; |
08 | background: #fff; |
09 | z-index: 1; |
10 | } |
11 | #loader { |
12 | display: none; |
13 | position: fixed; |
14 | top: 50%; |
15 | left: 50%; |
16 | width: 200px; |
17 | height: 200px; |
18 | margin-top: -100px; |
19 | margin-left: -100px; |
20 | text-align: center; |
21 | color: #fff; |
22 | z-index: 2; |
23 | } |
24 | #contents{ |
25 | width:100%; |
26 | font-size:50px; |
27 | margin: 40px auto; |
28 | } |
ローディングを表示する部分については、デフォルトでは、display:noneにして、表示させないようにしておきます。
コンテンツ部分はご自身のサイトに適したものを。
jQuery
最後にjQuery。
01 | <script> |
02 | $(function() { |
03 | var h = $(window).height(); //画面の高さを取得 |
04 | |
05 | $('#contents').css('display','none');//コンテンツを非表示に |
06 | $('#loader-bg ,#loader').height(h).css('display','block');//ローディング画像を表示 |
07 | }); |
08 | |
09 | $(window).load(function () { //読み込み完了したら実行する |
10 | $('#loader-bg').delay(900).fadeOut(800);//ローディングを隠す |
11 | $('#loader').delay(600).fadeOut(300); |
12 | $('#contens').css('display', 'block');//コンテンツを表示する |
13 | }); |
14 | |
15 | $(function(){ |
16 | setTimeout('stopload()',10000); //いつまでもローディング状態にならないように10秒で強制表示させる |
17 |
18 | }); |
19 | |
20 | function stopload(){ //強制表示の関数 |
21 | $('#contens').css('display','block'); |
22 | $('#loader-bg').delay(900).fadeOut(800); |
23 | $('#loader').delay(600).fadeOut(300); |
24 | } |
25 | </script> |
こんな感じです。それぞれコメントを書いてますので、それを参考に。
後半部分に、setTimeout関数を入れてます。あまりにも読み込みに時間がかかりすぎた場合に、いつまでもローディング状態だと具合が悪いです。
「いつまでたっても何も表示されないじゃないか」となってしまいますので。
なので、10秒たったら強制的にコンテンツを表示させるロジックを入れています。
秒数は各自好きなタイミングでよろしいかと思います。10秒は長いかな。。
是非是非、お試しくださいませ。
