サイト読み込み中にローディングアニメーションを表示させる方法

サイト読み込み中にローディングアニメーションを表示させる方法

スポンサーリンク

スポンサーリンク

容量の重たいwebサイトやページを表示させるときに、読み込み時間が長くなってしまうということは誰しもが経験したことがあるかと思います。

中々ページが表示されない、あるいは表示される気配がないときのユーザーの行いとしては、ついつい離脱してしまいがちになるという事実が、幾つものサイトの検証により実証されています。

中には2秒間何も表示されないだけで、ユーザーの離脱率は7倍にも膨れ上がると解説しているサイトも存在するほどです。

そんなユーザーの離脱を少しでも少なくするために、今回の記事ではページ読み込み中にローディングアニメーションを表示させる方法を紹介します。

デモ画面

jQuery

jQueryを事前に読み込ませておきます。

HTML

解説としては、1行目から6行目までがローディングアニメーションを表示させるための記述となり、<body>タグの直後に追記します。

7行目以降に、表示をさせたいコンテンツを加えます。

表示させるアニメーションは、3行目の<img>タグにて読み込ませます。デモ画面ではありきたりなアニメーションgifを表示していますが、これを変更することで任意のアニメーションにすることももちろん可能です。

CSS

CSSは、ローディングアニメーションを表示させたい位置付けをするためだけに使います。今回は、画面の天地左右中央に表示させるようにしています。

読み込ませたいメインコテンツ部分のCSSについては省きます。

スクリプト

スクリプトの各ID(クラスでも大丈夫です)部分を、HTMLとCSSのそれぞれと関連付けてください。

まとめ

ほとんどをコピペだけで実装することが可能なローディングアニメーション。

アニメーション部分を手の込んだものにするだけで、ロード時間の解消ばかりかわざわざロードディングアニメーションを見たいがために、何度もサイトを訪れてくれるユーザーもいるかもしれません。

ここまでお読みいただきまして、誠にありがとうございました。

スポンサーリンク

スポンサーリンク

スポンサーリンク