*

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の使い方

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

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

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

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

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

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

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

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

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

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

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

著者について

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

フォローはこちら

       

       
エックスサーバーでメールが送れない「Client host rejected:Access denied」

エックスサーバーで作成したメールアカウントでメールを送信しよう

札幌駅パセオ地下1階のパスタとパフェが美味しい「プロヴァンス」でランチ

札幌駅のパセオ地下1階にあるプロヴァンスは南フランスとイタリア

千歳市の和食処「ほうりん」の安い充実の寿司ランチ

千歳市にある和食処ほうりんは千歳駅の南西にある居酒屋が立ち並ぶ

スパホテルソーレ
札幌のカプセルホテル「スパホテルソーレすすきの」に泊まった感想

札幌の地下鉄すすきの駅の近くにあるカプセルホテル「スパホテルソ

札幌駅近くのモダン和食レストラン「えりも亭」で珍しい縮れ蕎麦ランチ

札幌駅の北口から徒歩2分程度の所に和風なモダンレストラン「えり

→もっと見る