*

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

おすすめトピックス

関連記事

動く炭酸
飲み物の写真がリアルに動き出す!フリーソフトSizzTassの使い方

知り合いに聞いたのですが、「料理の写真からぐつぐつと煮えたぎる写真を作れるソフトがあるらしいよ。テレビでやってた。」と。最初は何だそれは?と思って意味がよく理解できませんでした。 ソフト名を聞いて調べてみたのですが、確か […]

divタグ
div要素のクラス名をnth-childの擬似クラスで何番目を指定しても効かない

CSS3 が登場して擬似クラス nth-child が使えるようになって、要素の何番目のみにスタイルを適用するような事が非常に簡単になりました。従来ではクラスなどを駆使して無理やり指定していました。これではソースも CS […]

videoタグのmp4動画にもサムネイル画像を表示させるには

ニコニコ動画や Youtube を始め、インターネット上で動画を見たり配信する機会が珍しくない時代となりました。むしろ毎日アップロードされる動画が多すぎて見てもらう為の競争となっていると言っても過言ではありません。 そこ […]

https通信下でjavascriptが動かない場合の対処法

https 通信下で javascript が動かない!とお困りという事は、もしかしてあなたのページは特定のページだけ https 通信を行っているのではないでしょうか?例えばログインページ、決済ページのみ暗号化を行う […]

縦の三点リーダー
縦の三点リーダーをウェブサイト上で表示する方法

三点リーダーという言葉をご存知でしょうか。日本語の世界では度々登場するもので、小説、雑誌、文書など様々な場面に登場するものです。三点リーダーとはすなわち「…」、点が3つ並んだものです。普段のメールなどの会話でも言葉を省略 […]

スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。 そのスマートフォンサイトをちょっと思い出してみてください。 こ […]

著者について

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

フォローはこちら

       

       
世界一のジェラート
彦根市にある世界一のジェラート店「ジェラテリアアズーロ」で滋賀ならではの味を堪能

世界一のジェラートのお店が滋賀県に、彦根市にあるなんて。半信半

スマホで遊園地経営ゲーム「ローラーコースタータイクーンタッチ」レビュー

自分で夢のワンダーランドを作る遊園地経営シミュレーションゲーム

大垣で和風生パスタ!半個室で落ち着くニーニャニーニョ桜小町

岐阜県大垣市にニーニャニーニョ桜小町というパスタ店がありました

滋賀県の高校野球予選を観戦するのに入場料金はいくら?

夏、7月。全国の高校球児達が甲子園を目指して熾烈な野球の戦いが

Premiere Elementsでテキストアニメーションの効果時間(速度)を調整

Premiere Elements には誰でも簡単にテキストア

→もっと見る