ソースコピーで簡単に使えるCSS3とjQueryで作るローディングページ作る
- カテゴリー Web制作Tips
以前の記事で「画像を使わないでCSS3で様々なローディング用アニメーションをつくってみよう」という形でCSS3でローディングアイコンを作成しました。
しかしあのままでは動きませんので今回は、jQueryを利用して実際にサイトでローディングを行う際のサンプルを作成しました。
サイトでローディングを使うと言っても、使用イメージがつかないと思いますので、まずはサンプルをご覧ください。
今回作成するローディングサンプルページ
http://www.html5-memo.com/sample/jq-loading/
見ていただけると思うかもしれませんが、サンプルでは実際はローディングしている間にローディングしてないデータはすべて見えてしまうので必要ない？と思ってしまうかもしれませんが、ローディングが必要なときに使っていただければと思います。
左側は、コンテンツのローディングが完了してから処理を実行したもので、右側は、ローディングを待たずに処理を実行したものです。
どちらも同じ処理を実行していますが、右側はコンテンツの読み込みと同時に処理が進行しているため、意図した動きになっていません。
サンプルのように複数の画像を使用する場合などは、コンテンツの読み込みに時間が掛かります。
そのため、意図した動きやインターフェースを提供する為には「ローディング完了後に処理する」という記述をする必要があります。
今回作成したコードは下記になります。
JavaScriptでローディング処理を書いてみる
まずは、ベースとなるHTMLを作成します。
【HTML】
<div id="load">
<div>
<div class="loading">
<div id="circleG">
<div id="circleG_1" class="circleG"></div>
<div id="circleG_2" class="circleG"></div>
<div id="circleG_3" class="circleG"></div>
</div>
<!-- /loading -->
</div>
<table>
<tr>
<td><a href="#"><img src="img/01.jpg" alt="" width="150" height="100" /></a></td>
<td><a href="#"><img src="img/02.jpg" alt="" width="150" height="100" /></a></td>
<td><a href="#"><img src="img/03.jpg" alt="" width="150" height="100" /></a></td>
</tr>
<tr>
<td><a href="#"><img src="img/04.jpg" alt="" width="150" height="100" /></a></td>
<td><a href="#"><img src="img/05.jpg" alt="" width="150" height="100" /></a></td>
<td><a href="#"><img src="img/06.jpg" alt="" width="150" height="100" /></a></td>
</tr>
<tr>
<td><a href="#"><img src="img/07.jpg" alt="" width="150" height="100" /></a></td>
<td><a href="#"><img src="img/08.jpg" alt="" width="150" height="100" /></a></td>
<td><a href="#"><img src="img/09.jpg" alt="" width="150" height="100" /></a></td>
</tr>
<tr>
<td><a href="#"><img src="img/10.jpg" alt="" width="150" height="100" /></a></td>
<td><a href="#"><img src="img/11.jpg" alt="" width="150" height="100" /></a></td>
<td><a href="#"><img src="img/12.jpg" alt="" width="150" height="100" /></a></td>
</tr>
<tr>
<td><a href="#"><img src="img/13.jpg" alt="" width="150" height="100" /></a></td>
<td><a href="#"><img src="img/14.jpg" alt="" width="150" height="100" /></a></td>
<td><a href="#"><img src="img/15.jpg" alt="" width="150" height="100" /></a></td>
</tr>
</table>
</div>
<!-- /load -->
</div>
【CSS】
/* ブラウザのデフォルトのスタイルをリセット */
* {margin: 0; padding: 0; outline: none;}
img {border: none;}
a {
text-decoration:none;
color:#00c6ff;
}
/* レイアウト */
#load{
width:520px;
margin:0 auto;
}
#load > div{
width:520px;
height:590px;
position: relative;
}
.loading{
position: absolute;
top:50%;
left:50%;
margin-left:-20px;
margin-top:-4px;
}
td{
padding-right:20px;
padding-bottom:10px;
}
td a{
display: block;
background:#fff;
padding:4px;
border:1px solid #ccc;
line-height:0;
}
td:last-child{ padding-right:0;}
tr:last-child td{ padding-bottom:0;}
/* ローディングのスタイル */
#circleG{
width:40px;
height:8px;
}
.circleG{
float:left;
height:8px;
margin-left:4px;
width:8px;
background-color:#17cddd;
background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff);
-webkit-animation-name:bounce_circleG;
-webkit-border-radius:5px;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-moz-animation-name:bounce_circleG;
-moz-border-radius:5px;
-moz-animation-duration:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
opacity:0.3;
border-radius:4px;
}
#circleG_1{ -webkit-animation-delay:0.5s; -moz-animation-delay:0.5s;}
#circleG_2{ -webkit-animation-delay:1s; -moz-animation-delay:1s;}
#circleG_3{ -webkit-animation-delay:1.5s; -moz-animation-delay:1.5s;}
@-webkit-keyframes bounce_circleG{
0%{ opacity:0.3}
50%{ opacity:1; background-color:#000000}
100%{ opacity:0.3}
}
@-moz-keyframes bounce_circleG{
0%{ opacity:0.3}
50%{ opacity:1; background-color:#000000}
100%{ opacity:0.3}
}
以上でベースは完成です。
【Javascript】
スクリプトを書く前に、今回はjQueryを使用するので、http://jquery.com/にアクセスし、ダウンロードして使用するか、グーグルコードなどからコードを取得してください。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>実践！JavaScriptでローディング処理</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="script.js"></script> </head> <body> </body> </html>
以上で準備は完了です。
次は該当のスクリプトを書いていきます。
$(function(){
//$('td')を変数に格納
var $td = $('td');
//<td>を非表示にする
$td.css('display', 'none');
//全てのページコンテンツを読み込んだ後に、function内の処理を実行
$(window).load(function(){
//ローディングをHTMLから削除する
$('.loading').remove();
//tdの数だけループ
for(var i = 0; i < $td.length; i++){
//tdのi番目を、0.1×i秒後に、フェードインさせる
$td.eq(i).delay(100 * i).fadeIn();
}
});
});
[/javascript]
以上で完成です。
完成したものは以下になります。
<img src="http://www.html5-memo.com/wp-content/uploads/2012/06/sample1-574x341.jpg" alt="今回作成するCSS3とjQueryのサンプル" title="今回作成するCSS3とjQueryのサンプル" width="574" height="341" class="alignnone size-medium wp-image-5040" />
<a href="http://www.html5-memo.com/sample/jq-loading/" target="_blank" class="siteLink">http://www.html5-memo.com/sample/jq-loading/</a>
<span class="aka1">※今回はjavascript、CSSをHTML内に記述しましたが、実際使用する際は外部ファイルに記述して使用してください。</span>
下記のコードで、括るだけでコンテンツの読み込み後に処理をしてくれるのでいろいろ使う機会があるかと思います。
[javascript font_size="90%"]
$(window).load(function(){
//コンテンツが読み終わった後に行いたい処理
});
CSS3でローディングアイコンを作成する方法についてはこちら
画像を使わないでCSS3で様々なローディング用アニメーションをつくってみよう
参考になるサイト
jqueryで画像のロード完了後に実行
http://www.stairsdesign.jp/blog/2011/07/jquery.html
【jQuery】トピック
http://saboten009.blogspot.jp/2009/02/jquery.html
jquery：指定した画像が読み込まれたら実行
http://www.gravity-works.jp/gravica/web/js/003021.html
画像のロード完了イベントを取得してみる
http://www.pxt.jp/ja/lab/themes/webtech/javascript/imageonload/index.html
[jquery]ページ読み込み完了後に実行する
http://d.hatena.ne.jp/tomoyamkung/20080903/1220403266
[jQuery]Google Chromeで画像のwidthやheightがうまく取得できない場合の対処方法
jQueryの基礎
この記事を書いた人
著者 : ハヤシユタカ
2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら
超シンプルで簡単なフレームワーク「Responsive Grid System」でレスポンシブWEBサイトをつくろう（前編：導入編）
超シンプルフレームワーク「Responsive Grid System」に画像対応などしてレスポンシブWEBサイトをつくろう（カスタマイズ編）