遅延ロードで必要なデータのみ取得

大量のデータや読みこみに時間がかかるデータを画面に表示するときに
かなり時間がかかる

この場合、最低限の画面を表示し
徐々にデータを表示したり
ユーザーがWikipediaのコンテンツみたいに
アコーディオンを開いたらオンデマンドで
データを取得、表示するという遅延ロードが有効

すごい時間をかけて全部でるより
徐々に表示されるほうがストレスは少ない

jQueryMobileで、
リスト表示で
この遅延ロードをするにはコツがある

なぜなら
Javascriptで後からタグを追加しただけだとjQueryMobileのスタイルが適用されないから

なので、追加したら
listview(“refresh”)
をする必要がある

まず、実践するには

<script src="js/loadform.js"></script>

で自作スクリプトの読みこみ

次に、開閉したい場所の領域を

<div data-role="corapsible" data-corapsed="true" id="corapsible-list">
<h3>遅延ロードの実践</h3>
<ul data-role="listview" id="list">
</ul>
</div>

として設定

data-role=”corapsible”
は、開閉する指定

data-corapsed=”true”
で開いた状態にする
デフォルトは false で閉じた状態

http://dev.screw-axis.com/doc/jquery_mobile/components/content/collapsible/
を参考にするとわかりやすい

そして、処理はJavascript

途中で
$.mobile.showPageLoadingMsg()
と
$.mobile.hidePageLoadingMsg()
があるけど、これは
ローディングアイコンの表示、非表示をする

この動作サンプルとしては
http://www.atmarkit.co.jp/fdotnet/chushin/jqmobile_06/jqmobile_06_02.html
にTwitterのつぶやきを表示したりするサンプルがあるので
こちらを参考にするとわかりやすい

あと
data: “param1=123&param2=homuhomu”
これは
http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/
や
http://phpjavascriptroom.com/?t=ajax&p=jquery_ajax_requests
や

jQuery $.ajaxでJSON・JSONP読み込みに使用する主なオプション

をみたかんじだと
サーバーip/json.php?param1=123&param2=homuhomu
になる

$.trim()
は
http://semooh.jp/jquery/api/utilities/jQuery.trim/str/
にあるように、空白の削除するメソッド
つまり
if($.trim($(“#list”).html()) ==””){
なら
id=”list”のタグの中身が空ならとなる

$.each()は
http://semooh.jp/jquery/api/utilities/jQuery.each/object%2C+callback/
にあるように、繰り返し処理をする
繰り返すのは
$(‘#list’).append(“

“+data[e]+”

“);
でリスト追加処理

$(document).on("expand","#corapsible-list",function(e,data){
if($.trim($("#list").html()) ==""){
$.mobile.showPageLoadingMsg();

$.ajax({
type:"POST",
url:"./json.php",
data:"param1=123&param2=homuhomu",
dataType:'json',
success:function(data){
$.each(data,function(e){
$('#list').append("<li>"+data[e]+"</li>");
});
$('#list').listview("refresh");
$.mobile.hidePageLoadingMsg();
},
error: function(msg){
alert(msg.responseText);
$.mobile.hidePageLoadingMsg();
}

});

}

});

そして、PHPファイルでデータの用意
ファイル名は json.php

<?php
header('Content-type: application/json;charset=utf-8');
$data = array("みかん","りんご","ブドウ","もも");
echo json_encode($data);
?>

json_encode()
で配列をjson形式にしている

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル