遅延ロードで必要なデータのみ取得
大量のデータや読みこみに時間がかかるデータを画面に表示するときに
かなり時間がかかる
この場合、最低限の画面を表示し
徐々にデータを表示したり
ユーザーがWikipediaのコンテンツみたいに
アコーディオンを開いたらオンデマンドで
データを取得、表示するという遅延ロードが有効
すごい時間をかけて全部でるより
徐々に表示されるほうがストレスは少ない
jQueryMobileで、
リスト表示で
この遅延ロードをするにはコツがある
なぜなら
Javascriptで後からタグを追加しただけだとjQueryMobileのスタイルが適用されないから
なので、追加したら
listview(“refresh”)
をする必要がある
まず、実践するには
1 | <script src="js/loadform.js"></script>
|
で自作スクリプトの読みこみ
次に、開閉したい場所の領域を
1 2 3 4 5 | <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¶m2=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¶m2=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]+”
“);
でリスト追加処理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | $(document).on("expand","#corapsible-list",function(e,data){
if($.trim($("#list").html()) ==""){
$.mobile.showPageLoadingMsg();
$.ajax({
type:"POST",
url:"./json.php",
data:"param1=123¶m2=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
1 2 3 4 5 | <?php
header('Content-type: application/json;charset=utf-8');
$data = array("みかん","りんご","ブドウ","もも");
echo json_encode($data);
?>
|
json_encode()
で配列をjson形式にしている