前回のload()編に続き今回は、jQueryの$.get()を使ってxmlファイルの読み込み時のローディングをサンプルを紹介したいと思います。
htmlファイルの読み込みよりはコチラの方がローディングを使う利用頻度が高いかと思います。
htmlファイルの読み込みよりはコチラの方がローディングを使う利用頻度が高いかと思います。
jQueryでローディング処理 -$.get()編-
■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;
}
■xml
<?xml version="1.0" encoding="utf-8"?> <gallery> <item> <txt>サンプル1</txt> <images>images/pic1.jpg</images> </item> <item> <txt>サンプル2</txt> <images>images/pic2.jpg</images> </item> <item> <txt>サンプル3</txt> <images>images/pic3.jpg</images> </item> <item> <txt>サンプル4</txt> <images>images/pic4.jpg</images> </item> <item> <txt>サンプル5</txt> <images>images/pic5.jpg</images> </item> <item> <txt>サンプル6</txt> <images>images/pic6.jpg</images> </item> <item> <txt>サンプル7</txt> <images>images/pic7.jpg</images> </item> <item> <txt>サンプル8</txt> <images>images/pic7.jpg</images> </item> <item> <txt>サンプル9</txt> <images>images/pic9.jpg</images> </item> </gallery>
■javascript
$(function() {
$("#button").one('click', function() {
$("#loading").show();
$.get("test.xml",function(xml) {
$(xml).find('item').each(function() {
$("#pics").append(
'<div><img src="'
+ $(this).children('images').text()
+ '" /><span>'
+ $(this).children('txt').text()
+ '</span></div>'
);
});
$("#loading").fadeOut(function() {
$("#pics").show();
});
});
});
});
※ブラウザによってはダウンロードしたファイルをローカル環境で開いてもうまく動作しません。過去記事参照
解説
htmlソースとcssは前回と同じです。
今回はxmlファイルを読み込むので適当にxmlファイルを用意します。
まずはローディング用の要素ID名「loading」とxmlのデータを挿入する要素ID名「pics」をcssでdisplay: none;にします（非表示）。
<div id="loading"><img src="images/loading.gif" /></div> <div id="pics"></div>
#pics,#loading {
display: none;
}
次にスクリプトの説明です。
前回と説明が重複しますが、one()を使って一度だけ読み込み処理を行ないます。id「button」を一度だけクリックしたらというイベント処理です。
$("#button").one('click', function() {
そしてクリック後のコールバック関数でローディング画像をshow()で表示させます。
$("#loading").show();
以下からは前回と変わります。
ローディングを表示させたら、$.getを使いxmlファイルを読み込みます。
$.get("test.xml",function(xml) {
読み込んだxmlファイルからfind()で「item」を探しだしeach()で繰り返し処理を行ないます。
繰り返す処理内容は、iD「pics」の要素内にapped()でhtmlソースを追加するという内容です。
$(xml).find('item').each(function() {
$("#pics").append(
'<div><img src="'
+ $(this).children('images').text()
+ '" /><span>'
+ $(this).children('txt').text()
+ '</span></div>'
);
});
追加されるソースは以下のようになります。
xmlの記述してある「item」の数だけ取り出して追加します。
<div><img sec="images/pics1.jpg" /><span>サンプル1</span></div> <div><img sec="images/pics2.jpg" /><span>サンプル2</span></div> <div><img sec="images/pics3.jpg" /><span>サンプル3</span></div> <div><img sec="images/pics4.jpg" /><span>サンプル4</span></div> ・ ・ ・
xmlファイルからデータを取り出し終わったら、ID「loading」をフェードアウトしxmlのデータを挿入したiD「pics」を表示して完了です。
$("#loading").fadeOut(function() {
$("#pics").show();
});