jQueryで簡単なloading画面を作る
最近ではネットの回線速度も速くなり、画像などの読み込みはほぼ一瞬で終わることが多くなりましたが、
パララックスを使ったサイトなどで大量の画像を使う場合には、やはりそれなりに読み込むまでに時間がかかってしまいます。
そういった場合、待っている時間を少しでも退屈させないためにローディングのアニメーションを表示することが多いですが、
今回は実装のときに迷わないために、jQueryを使ったローディング画面の実装方法について、
復習してみました。
↓今回作ってみたもの
（注：ローディング画面確認のため、容量の大きな10MBの画像が含まれています）
今回は、
前もってローディングの画面を予め配置しておいて、
ページ内の要素が読み込み終わったらローディング画面を非表示にするという方法をつかいました。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div> <ul id="images"> <li><img src="images/img01.jpg" alt="image"></li> <li><img src="images/img02.jpg" alt="image"></li> <li><img src="images/img03.jpg" alt="image"></li> <li><img src="images/img04.jpg" alt="image"></li> <li><img src="images/img05.jpg" alt="image"></li> <li><img src="images/img06.jpg" alt="image"></li> </ul> </div> <div class='loadingWrap'> <img src='images/now-loading.gif'> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | html, body{ width: 100%; height: 100%; } .loadingWrap{ width: 100%; height: 100%; background: #fff; position: fixed; top: 0; left: 0; } .loadingWrap img{ position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -150px; } |
画面全体をローディング画面が隠すような配置にしています。
JavaScript
|
1 2 3 4 | //すべての要素が読み込み終わったら、ローディング画面を非表示にする $(window).load(function(){ $(".loadingWrap").fadeOut(); }); |
loadイベントでページ全体が読み込み終わるのを待ち、
読み込み終わったら、fadeOut()でローディング画面を非表示にしています。
はじめはローディング画面をjQuery内で追加しようとしたのですが、
画像が読み込まれるまでjQuery自体が動かないために、
ローディング画面が表示される前に画像が読み込まれている様子が表示されてしまうという状態になってしまったため、
断念して前もってHTMLに書き込んでおく方法を取りました。
Author Profile
SHARE
