jQueryのローディングサンプルを作っていたら長くなってしまったのでhtmlファイル読み込み時のローディング処理とxmlファイルを読み込む際のローディング処理の二回に別けて記事を書きたいと思います。
ローディングはサーバーサイドのプログラムやFlashと違い使う機会は限られますが覚えておいて損はないかと思います。
今回は非同期通信（jQueryのload()利用）でhtmlファイルを読み込む際のローディングサンプルの紹介です。
ローディングはサーバーサイドのプログラムやFlashと違い使う機会は限られますが覚えておいて損はないかと思います。
今回は非同期通信（jQueryのload()利用）でhtmlファイルを読み込む際のローディングサンプルの紹介です。
jQueryでローディング処理 -load()編-
■html
<body> <div id="button">クリックで読み込み</div> <div id="sample"> <div id="loading"><img src="images/loading.gif" /></div> <div id="pics"></div> </div> </body>
■css
#pics,#loading {
display: none;
}
■javascript
$(function() {
$("#button").one('click', function() {
$("#loading").show();
$("#pics").load('test.html', function() {
$("#loading").fadeOut(function() {
$("#pics").show();
});
});
});
});
※ブラウザによってはダウンロードしたファイルをローカル環境で開いてもうまく動作しません。過去記事参照
解説
今回はボタンをクリックしたらhtmlファイルを読み込むという作りにします。
そしてhtmlの読み込みが完了するまでの間にローディング画像を表示させます。
まず、2種類のhtmlファイルを用意します。
1つ目は読み込み元となる親ファイル、もう1つは読み込むファイルです。読み込むhtmlファイルは何でもよいので今回は特に解説しません。
あと、注意しておくとload()で読み込めるのはhtmlファイルだけになります。
xmlやphp等のデータを読み込む際には$.getや$.postになります。
下準備として以下のid「loading」と「pics」はcssで非表示（display: none;）にしておきます。
<div id="loading"><img src="images/loading.gif" /></div> <div id="pics"></div>
次にスクリプトの説明です。
one()は一度だけ実行する場合に使います。同じファイルを何度も読み込むことはないので今回はone()を使い、id「button」を一度だけクリックしたらというイベント処理にしました。
$("#button").one('click', function() {
そしてクリック後のコールバック関数で以下の処理を行ないます。
$("#loading").show();
まずローディング画像をshow()で表示させます。
ローディングを表示させたら、ID「pics」の要素内にload()でtest.htmlを挿入します。
読み込みが完了したらコールバック関数で、ローディングをフェードアウトさせます。
$("#pics").load('test.html', function() {
$("#loading").fadeOut(function() {
$("#pics").show();
});
});
以上でhtmlファイルのローディング処理が完了です。
ちなみに以下の2行を消すとクリックをしなくても、親ファイルの読み込みのタイミングでローディング→test.htmlファイルの読み込みが発生します。
$("#button").one('click', function() {
});