イマドキのWebサイトをみると、よくローディング画面が出てきてサイトが出現する演出をよく見かけます。なので、Webサイトを作るうえでは、不可欠な要素になってきています。

ですが、コーディングに慣れていないと作りたくてもどうやっていいか、わからないのではないでしょうか?僕もそうでした。プラグインを使うと楽なのですが、応用が効かなくなるので、この記事では1から作って、ローディング画面の実装をちゃんと理解することを目指しました。

実装したいページローディングエフェクト

実装したい内容は、ページが表示される前に現れるローディングのアニメーションの部分です。具体的には、下記の2つのwebページのローディングページの要素を組み合わせたイメージ

0758970bb4a731c89c2837a7648853d5.gif (8.8 MB)

http://www.a-tm.co.jp/

2618929eaff57894864c2efdc4e24d48.gif (1.9 MB)

http://www.epoch-inc.jp/

アニメーションの手順

  1. 最上部にある赤い線が左から右へ伸びる
  2. ロゴが現れる
  3. 赤い線とロゴが消える
  4. ヘッダーにあるナビゲーション以下のコンテンツが現れる
  5. ヘッダーにあるナビゲーションが上から現れる

実装手順

1.ヘッダーにあるナビゲーションが上から現れる

まず、これから作っていきましょう。ページが読み込まれた段階で、ナビゲーションが上からスライドダウンするようにします。

2.ヘッダーにあるナビゲーション以下のコンテンツが現れる

コンテンツが、すべて読み込まれたあとで、アニメーションにより(たとえば、フェードインとかを)表示します。

3.最上部にある線が左から右へ伸びて、ロゴが現れる

線が左から右へ伸びるのをタイマーを使って、実装する。右に伸びきって、線をフェードアウトしたあとで、ロゴをフェードインさせる。

 

ここまでを独立して作る。

4.「1~3」を組み合わせる。

1から3が大きな流れです。最終的に完成して見ると、上記とは少しずれてきます。

あと、EdgeとIE対応にするのに苦労するかもしれません。

実際に触りながら実装していきましょう

  • ファイルはこの状態からコードを追加していきます。
  • ヘッダーとコンテンツ部分を実装

1.ヘッダーにあるナビゲーションが上から現れる

jQueryでは、基本的に、2つのタイミングを提供しています。

  • 1)HTMLが読み込まれたタイミング。(これは、$(document).readyで囲って)
  • 2)画像などがすべて読み込まれたタイミング。(これは、$(window).loadで囲えばいい)

参考 http://qiita.com/8845musign/items/88a8c693c84ba63cea1d

まずは、2)のタイミングで、ヘッダーをスライドダウンさせてみる。

jQuery CDN から jQuery 3.0 を読み込ませて、fileは下記のように実装する。ここまでのコミット

ブラウザではこんな見た目(挙動)になるはず。

$(window).load()はページにあるすべての要素、例えば画像などがすべて読み込まれた段階で、{この中のscript}が走ります。

それぞれのイベントの順番は以下です。

  • ページの読み込みが始まる
  • HTMLの読み込みが終わる
  • $(document).readyが実行
  • 画像など含めすべてのコンテンツの読み込みが終わる
  • $(window).loadが実行

試しに、容量の多い画像を16枚用意するとわかるかもしれません。ここまでのコミット

これを見ると、先に下記を読み込んで、header部分が display: none;されている(消えている)ことがわかる。

その後、画像が読み込まれて、ニュるっとheaderがslide downしてくる挙動になります。

つまり、全画像が読み込まれたタイミングで、1秒待って(.delay(1000))下記が走るのです。

ちなみに、load()はブラウザによって動作が保証されないため1.8で非推奨となり3.0で削除されました。今はon()の中に入れるのが一般的です。

jQuery | Category: Deprecated 1.8

2.ヘッダーにあるナビゲーション以下のコンテンツが現れる

次は、「コンテンツ部分が現れて、そのあとにheaderが現れる」を実装してみましょう。つまり、jsファイルにscriptを追加するだけです。

最初は、.header.contentsdisplay:none;(非表示)の状態で。

画像が全部読み込まれたらon.load内のscriptが走り、

$(".contents").fadeIn("slow");が実行され、2.2秒後に.headerslidedownします。ここまでのコミット

これをみると、画像が1つづつ読み込まれる様子が見えないので、画像が全部読み込まれたらon.load内のscriptが走り、.contentsfadeInしてることがわかる。表示されるタイミングは、それぞれ、delayの時間で、調節します。

3.最上部にある線が左から右へ伸びて、ロゴが現れる

線を出すために、写真の読み込みを監視する必要があるのはなぜか?

webページを表示するまでのファイルの読み込み順は、大きく分けて、HTML → CSS・JS → img・iframe → webページの表示らしいです。

http://kawa.at.webry.info/200911/article_7.html

なのでまず、imgタグ(とiframeタグ)は、特別に読み込みをwatchしないといけない。なぜなら、線を出したり、消したりするタイミングの指標としたいので。
(iframeタグは、今回は関係ないですが、imgと同じように、onloadで、タイミングを捉えることができるということを知っておいて欲しかったから書きました)

もしくは、同じですが下記

上記 script にある「何かしらの処理」をするタイミングはHTML(DOM)の読み込みが終わった後です。つまり、「何かしらの処理」の中は記述順によっては他のJSやCSSも読み込み、それを反映した表示をしてないし、ましてやimgやiframeは1つも表示されていないでしょう。

imgタグとiframeタグは、on.(loadのタイミングで監視できます。

参考:これ「script・css・img・iframe が読み込まれるタイミング調査」をみると
http://kawa.at.webry.info/200911/article_7.html

まず、HTMLが読み込まれて、次に、CSSとJSが読み込まれる、両者は優劣なしに、上から書いた順に読み込まれる。

head 内の script, css が読み込まれ、全ての読み込みが完了した後に body 内の script を読み込む

HTML 内の全ての scriptの読み込みを待ってから、次に img を読み込み、全ての img が終わったら、最後に iframe を読み込む。こういう順番らしい。で、imgタグの読み込みをwatchしたいので、最初にも出てきた、これを使う!

imgタグを1枚づつ取得するscriptは

こんな感じです。こうすると、イメージが読み込まれるタイミングをつかむことができます。あと、eachメソッドについては、これを参考にしてください。簡単に言うと、eachを使うと、1個ずつに対して順繰りに処理を行うことができるやつです。

eachメソッドの書き方

$.each(オブジェクト, 処理) ループを回すためのオブジェクトを第一引数に、処理を第二引数に書きます。例えば配列に対してループを回したい時は以下のように書きます。

この場合arrayの各要素に対して、function内の処理を行います。これはいわば、jQueryの繰り返し文です。jQueryで取得した要素の数って何個かわからない場合もあるし、要素オブジェクトもjQueryで取得しているなら、jQueryのeachメソッドで処理したほうがいいんです。で、処理には関数(function(){…});)を書けばいい。

EdgeとIEや、画像がキャッシュ対策

EdgeとIEや、画像がキャッシュされてる場合は、そもそも、このloadを捉えられないときがあります。

複数回ページの更新を行おうとした場合に、Internet Explorer (IE) では最新の情報を表示できないのです。これは、IE が同一の要求をキャッシュで処理しようとするためです。

参考:Internet Explorer によるコンテンツ キャッシュを無効にする
https://code.msdn.microsoft.com/jQuery-howto-10502352

この問題を解決するには、下記のように書くといいです。

  • loadCount:読み込まれていく画像の数をカウントするための変数
  • $("img").each(function():imgタグそれぞれに対して、functionの中を実行しなさいという命令

new Image()での、画像読み込み表示

jQueryで、画像読み込み表示には色々な方法はありますが、javascriptの new Image()を使用して表示させる例が多いみたいです。

参考 http://pops-web.com/main/pops/archives/189

$(this)は、ある1つのimgタグを指しています。で、これは、イメージオブジェクトを作成して、そのimgタグのsrcを、イメージオブジェクトのsrcに設定します。これにより、イメージオブジェクトのwidthで、画像が読み込まれたときに、imgタグのwidthと連動することになります。

なぜ、widthを見るかと言うと、imgタグには、widthが指定されているので、widthは、変わらないのですが、イメージオブジェクトは、widthを指定しなければ、画像が読み込まれた時に、widthが0以上の値を持つようになるからです。

これは、イメージオブジェクトがwidthを持つまで、widthが0以上かどうかを調べるためのタイマーです。
cntは、タイマーの繰り返し回数を数えていて、10回を超えたら画像が読み込まれたものとします。画像が読み込まれるのが失敗することもあるかもしれないので、そのときには、バーを伸ばしてスルーします。

これは、画像が読み込まれたら、つまり、widthが0以上の値をとった時の処理をわけています。画像が読み込まれたら、タイマーを止めています。

imgLength でイメージが読み込まれているので、1つイメージが読み込まれましたよとloadCount++;これで、1つカウントしてます。

そして、loadCount == imgLength

これで、読み込まれた画像の数と、ページの全体の数が同じなら、全部画像が読み込まれているのがわかるので、コンテンツをフェードイン、メニューをスライドダウンなどの処理を書きます。

},50); タイマーは、50msで動いているので、もし仮に画像がキャッシュにあってすでに読み込まれていたとしても50ms間隔で、最低、画像の数、線は、段階的に100%まで伸びて行きます。

ここまでを整理するとこんな感じです。

4.「1~3」を組み合わせる。

最終的に完成したJSが、以下です。

追加したCSS

追加したHTML

ここまでのコミット

追加したJSのこれや

これは、バーを滑らかに動かす(伸ばす)ためのコードです。

とすることにより、たとえば、17枚の画像(コンテンツ内の16枚の画像 + ロゴの画像)の10倍の170分割でスライダーを動かすことにしています。

するとスライダーが滑らかになります。しかし、1枚をあたかも10枚画像があるように処理しているため、1枚目の処理はもともとありましたが、残りの9枚の処理がありません。

そこで、これの登場です。

aCntは、0から8まで動きます。つまり残りの9枚を処理しています。9枚の処理が終わったら、つまりif(aCnt > 9){なら、タイマー処理を終了して、次の画像へ処理がうつります。

今回、画像が、ほんとうに読み込まれているかどうか調べていますが(実際に画像をサーバーからいくつか削除して動かしてみると(キャッシュに入っていない限り)かくかくとバーが動くはず)、ネットワークが遅くなるなどして(めったにありませんが)上記処理のおかげで、画像がばらばらと表示されていくのは防げます。delayを大きくすればそれでも防げますが、それだとほんとうにホームページが表示されるのが遅くなります。

疑問「今回イメージオブジェクトを作成しましたが、なぜ作成するのか?」

それを作成しないと(イメージオブジェクトのwidthが見れないと)画像が読み込まれたかどうかの判定ができないからなのか。

あと、$(this)は、ある1つのimgタグを指しているので、そのimgタグのsrcをイメージオブジェクトのsrcに設定するが、これも、なぜそうするのか?

これですが、内部処理を見ているわけではないので、実は確実なことは、わかりません。しかし、こうやると、うまくからこうしてるって感じです。

たとえば、imgタグのwidthを見て入れば良いのでは?と思うかもしれませんが、imgタグにwidthがCSSで設定されていたらwidthは、初めから0以上の値を持ちます。しかし、イメージオブジェクトの方は、srcを設定しているだけなので、キャッシュも含めて、画像が読み込まれた場合のみ、widthが設定されるようです。

イメージオブジェクトにwidthの情報が入る時は、全ての画像が読み込まれたタイミングだと思ってまちがいない??

全ての画像ではなく、1枚の画像です。

すべての画像は、上記で、動かしている。

なので、17枚画像があれば、cnt=0は、17回実行されます。すなわち、eachとは、imgタグすべてに対して、function()をそれぞれ実行しなさいよというメソッドです

最終的に出来上がったページ

https://ryosuketter.github.io/page_loading_effects/