jQueryでページローディング機能を実装する
jQueryリッチなコンテンツを求められるウェブサイトの場合はクライアント側で動きのある機能が効果的です。その中でも比較的よく見かけるのがページローディング機能です。ページの読み込み次第ではどうしても表示順序がバラバラになってしまうのでちょっと不恰好な印象を与えてしまう可能性もあります。
そこでページの読み込みの間にローディング画像を加えることで、すべて読み込みが終わってページコンテンツが揃った状態で表示できるのと、動きのある機能を加えることで洗練された印象を与えることができます。
ではコードを見ていきたいと思います。まずはHTMLから、ページローディングの要素は最初に持ってきます。その後にメインのコンテンツが続きます。ページローディングの構成ですが、全体を覆うラッパー要素とその中にローディング中を示すアイコンを入れています。こちらについてはデザインによって適宜アレンジするのもいいかと思います。
【HTML】※一部抜粋
<div id="pageloading-wrap"> <!-- 「Loaders.css」をアイコンに採用 --> <div id="pageloading-icon" class="ball-pulse-sync"><div></div><div></div><div></div></div> </div> <div class="content"> <!-- 以下コンテンツ本文 --> </div>
ちなみに今回使用したローディングアイコンですが「Loaders.css」というのを採用しました。すべてCSSで作られており、実装やカスタマイズも簡単でいろんなパターンが用意されているのでオススメです！
【Loaders.css】
https://connoratherton.com/loaders
このLoaders.cssを使用するには専用のCSSファイルを次のようにインクルードする必要があります。詳しくは上記の公式サイトをご覧ください。
<link rel="stylesheet" href="./loaders.min.css" type="text/css">
今回はこのようなCSSのローディングアイコンを使用しましたが、gifアニメの画像アイコンなどデザインに合わせて用意するのもOKです。
次にCSSですが、ページローディングのラッパー要素を画面を含むページ全体に表示されるようにします。こちらのサンプルではアイコンが常に中央に配置されているようにしていますが、デザインに合わせて適宜調整します。
【CSS】
#pageloading-wrap {
background: #466bda;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
text-align: center;
display: table;
z-index: 1;
}
#pageloading-icon {
display: table-cell;
vertical-align: middle;
}
最後にjQureyで表示の動きをつけていきます。こちらはとてもシンプルで、ページのロードが完了したタイミングでページローディング画面をフェードアウトさせるという動きです。念のため、読み込みがなかなか終わらないケースを想定して、一定時間で強制的にフェードアウトさせるようにしておくのもいいかと思います。
【javascript】
$(function(){
$(window).on('load',function(){
$("#page-loading").delay(1000).fadeOut('slow');
});
function loaderClose(){
$("#page-loading").fadeOut('slow');
}
setTimeout(loaderClose,10000);
});
いかがでしょうか、結構簡単に実装できますのでオススメです。ページローディングが消えるエフェクトですが、今回はフェードアウトを採用していますがこの辺りをこだわってみるのも面白いかと思います。今回のサンプルはこちらに用意していますのでまたご覧ください。
-
-
この記事を書いた人オガワ シンヤ
DesignSupply.代表 ／ ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中！制作中はチョコレートが欠かせない三十路Webクリエイター。
制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら
デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。
ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。
コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。
