*

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

おすすめトピックス

関連記事

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

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

イメージマップ
mapのareaリンクにロールオーバーを実現する簡単な代替策

一つの画像内に複数のリンクを貼る事ができる html の map タグと area タグがあります。これをイメージマップと言います。このイメージマップを使ってとあるコンテンツを作っていたのですが、画像内のリンク領域にマウ […]

スマホを操作する手
スマホでWeb閲覧時代にスマホサイトでNGだと思う事3つ

ちょっと前まではインターネットを見るなら、通販するならパソコン!という時代でしたが、既にこれは終わった時代です。ここ2,3年は、インターネットを閲覧、通販においてもスマートフォン率がだんだん上昇しています。これは当サイト […]

css3
CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス

スタイルシート(CSS)はウェブサイトにデザインを適用するための言語。そのスタイルシートのバージョンは今では3になっており、かなり表現力豊かで優秀になっています。 例えば ul li タグのリストの場合、従来の CSS2 […]

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

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

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

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

著者について

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

フォローはこちら

       

       
長浜市の隠れ家イタリアン「プチレストランカナモリ」でパスタランチ

滋賀県長浜市でどこか食べに行こうとなった時、長浜市にはファミレ

microUSBケーブルでもUSB Type-Cに対応させるには変換アダプタを使おう

USB ケーブルといえば様々な家電や端末に使います。スマートフ

作業用BGMをすぐに探して作業したい人向けサイト「#作業してくる」の使い方と活用法【無料】

創作活動にしろ、書類作成、レポート作成、現代を生きる人々には作

ボンボンショコラ
珠玉のチョコレート専門店!滋賀県長浜市の黒壁近く「ボンボンショコラ」

滋賀県長浜市に本格チョコレート専門店があります。その名前は「L

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

三点リーダーという言葉をご存知でしょうか。日本語の世界では度々

→もっと見る