jQueryでローディング処理 -$.get()編-

jQueryでローディング処理 -$.get()編-

前回のload()編に続き今回は、jQueryの$.get()を使ってxmlファイルの読み込み時のローディングをサンプルを紹介したいと思います。
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();
    			});
    



    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です