*

cssとjqueryでサイトのローディング画面を簡単に実現する作り方【プラグインなし】

公開日: : ノウハウ

現在ロード中を知らせるローディング画面(Now Loading)は今までにどこかのサイトで見たことがあるかと思います。かつて FLASH 動画全盛の時代にはこんなローディング画面を見る機会も多かったです。このようなローディング画面が作られるようになった理由は、ローディング画面を作らないと読み込みが終わるまで真っ白で何も表示されないためです。それだと閲覧者がページが固まったと勘違いしてすぐに帰ってしまうかもしれません。

ウェブサイトにおいては1秒でも早くページの読み込みが終わるに越したことはありませんが、特別なサイトだとどうしてもページの読み込みに待ち時間が発生してしまう事もあります。なので、ページの読み込みをなるべく待ってもらう為にローディング画面を実装する必要がありました。

htmlでローディング画面

今まで FLASH でローディング画面を作ったことはありましたが、html 上で作った事はありませんでした。その為作り方を調べる必要があったのですが、ローディング画面を作るだけにプラグインを使ったり長いスクリプトを書いたりとても難しいものばかりでした。

ローディング画面なんてもっとシンプルに、極限まで少ないスクリプトで実現できないものかと考えてみました。読み込み度をパーセンテージで表示するものもありますが、ここでは極限までシンプルにパーセンテージなしのローディング画面を作ってみます。ローディング画面入門編です。

ロード中にこのようなローディング画像を表示する事にします。

とりあえずまずはサンプルを御覧ください。

htmlでローディングテスト

ロードが完了するまでローディング画像が表示され、完了したらページが表示されます。仕組みをこれから解説します。

css部分

body{
	background-image:url("image/load.gif");
	background-position: center center;
	background-attachment: fixed;
	background-repeat:no-repeat;
}

body.loaded{
	background-image:url("image/back.jpg");
	background-position: center top;
	background-size:cover;
}

最初に body 要素の背景にローディング画像を表示しておいて、ロードが完了したら背景を切り替えるという仕組みです。このように2つの css を用意しておきます。上がロード中で下がロード後の css です。

loaded というクラス名は自由に決めていただいて構いません。

jquery部分

jquery と聞いて難しいと身構えてしまうかもしれませんが、極限までシンプルにしました。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

まずは head タグ内で jquery 本体を読み込む必要があります。既にある場合は必要ありません。

$(window).on('load', function(){
	$("body").addClass('loaded');
});

たった3行のこれだけです。1行目はページのロードが完了したら…という関数の始まりです。そして、2行目はロードが完了したら body 要素に「loaded」というクラスを付加しますよという意味です。これでロードが完了したら背景画像が切り替わります。背景画像がないのであれば css で「background-image:none;」とすれば良いでしょう。

この jquery は head タグ内に script タグで括って記述します。

おわりに

ローディング画面の方式にはバーが伸びるプログレスタイプやパーセンテージを表示するもの等いろいろありますが、いきなり難しいものを作ろうと思っても時間がかかるだけです。まずはシンプルなものから作って原理を理解する事をおすすめします。凝りだすのはそこからでも遅くはありません。

  • Pocket

おすすめトピックス

関連記事

画像のALT属性に文字を入れる気にならないのは画面に表示されないからだと思う

画像の ALT 属性って知っていますか?ALT 属性とは画像に付加するテキスト情報で、画像について手短に説明したテキストを入力する事が望ましいです。画像が表示されない時に何の画像かわかる為の代替テキストとして、音声読み上 […]

マウス
CSSのみでマウスのロールオーバーでopacityだと背景が濃いと白くならない対処法

画像のロールオーバーと言えば、ウェブサイトでリンクが付いた画像やバナーにマウスを乗せた時に色が変わったり何かしら変化がある処理を言います。一昔前には画像のロールオーバー一つに javascript を使って大変面倒で h […]

オフィス画像モニタ
CSSのみでhtmlタグの中に文章を挿入する方法があります

ウェブサイトの中で html の編集が出来ない場所に文章を書くなど編集する事は出来ません。一見当たり前の事を言っているだけです。しかし、CSS なら出来てしまうかもしれません。 目次1 htmlの編集が出来ない場所とは2 […]

これを見れば簡単!スマホサイトのフッターメニューをサクッと作るサンプル

スマートフォンなどのモバイル端末でウェブサイトを見る人が急増し、今の時代スマートフォン用サイトを作る事が当たり前となりました。スマホ用に別の html ファイルを用意するより一つの html で両方に対応するレスポンシブ […]

リストの表示数を制限する
HTMLでulタグのリスト項目の表示数を制限する

HTML で ul タグを使えば以下のようなリストを作れます。 リスト リスト リスト このようなやつですね。順序なしリストと呼ばれて、何かを箇条書する時に便利です。html タグでは以下のように記述します。 この箇条書 […]

CSSの擬似クラスnth-childは3の倍数以外というような否定条件も可能

CSS において偶数の要素だけ、奇数の要素だけ、何番目の要素だけというような細かな指定ができる擬似クラスがあります。 例えばリストの3番目の要素なら次のように指定します。 偶数番目の要素だけ指定したいなら… 奇数番目の要 […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
JA士幌町のスイートコーンとミルクの味わい「北海道のこだわりプリン」

士幌町の北海道のこだわりプリンをいただいて、とても美味しかった

Photoshopで写真の黄ばみや赤みを補正し抑える方法

デジカメで撮った写真が思ったより黄色かったという経験はありませ

簡単にPCのデスクトップキャプチャーができるソフト「FonePaw PC画面録画」のレビュー

パソコンの画面を録画するにはどうすればいいの? ウ

ホンダ純正Gathersドライブレコーダーでブザーが止まらない時の対処方法

近年煽り運転のニュースが世間を賑わせている中、ドライブレコーダ

Youtubeの動画でアンケートに回答するにはどうやるの?

いわゆる動画サイトには視聴者の方に意見を問うアンケート機能とい

→もっと見る