前提・実現したいこと
SmartyによるAjaxレスポンスの生成の描画速度が遅いのでどうにかしたいです
現在Ajaxで取得したデータに基づいて、一部ページhtmlの内容を書き換える動きをしています。
簡単なイメージでいうと、左半分の項目をクリックすると
右半分に対応するデータが非同期で表示されるといった感じです。
データが多い場合は右半分のデータ部分を改ページさせるため、等間隔で切ったセクションの一部のみshow
他はhideにしています。(jqueryでshow hideで改ページさせています)
発生している問題・エラーメッセージ
右半分に表示するデータ量が多い場合、レスポンスで帰ってきたhtmlの描画に時間がかっているようです
データの取得自体には時間がかかっておらず、
データが返ってきてから描画をするのに時間がかかっているようです。
描画速度を上げるためにできることはあるでしょうか?
また、そもそもこのようなデータ量の場合非同期通信でデータを取得すること自体が誤りなのでしょうか?
(改ページや項目選択でsubmitさせないでほしいという要件があったためこうなりました)
php
1 2class HagehageController extends AbstractActionController { 3 4 /** 5 * @return View 情報取得 6 */ 7 public function hogehogeAction() { 8 9 // 共通処理 10 require_once('共通処理.php'); 11 12 // 情報取得 13 $results['itemList'] = LibsHoge::getSearchItem($params['paramCD1'], $params['paramCD2'], $$params['searchText']); 14 15 // smartyのview表示 16 Smarty::render($params, $results); 17 18 } 19 20} 21 22共通処理.php内で$paramsにポストデータをセットしていたり 23Actionに対応するtplや表示に必要な物が共通処理として$resultsにセットしてあります。(フレームワークはzendを使用)
js
1 2 // 〇〇コード 3 var paramCD1 = $('#paramCD1').val(); 4 // 〇〇コード 5 var paramCD2 = $('#paramCD2').val(); 6 // キーワード 7 var searchText = $('#searchText').val(); 8 9 10 $.ajax({ 11 type: 'GET', 12 url: "hogehoge", 13 dataType: 'html', 14 data: {"paramCD1": paramCD1, "paramCD2": paramCD2, "searchText": searchText} 15 }).done(function (html) { 16 var $list = $(".itemList"); 17 // リスト内クリア 18 $list.empty(); 19 // レスポンス結果アペンド 20 $list.append(html); 21 22 }).fail(function(jqXHR, textStatus, errorThrown) { 23 //エラー処理 24 });
js
1 2<section class=""> 3 <div> 4 <assid > 5 <h4> 6 <span id="prev" data-action="prev"><<前回</span> 7 <span id="next" data-action="next">次回>></span> 8 </h4> 9 </assid> 10 </div> 11 <section > 12 {foreach from=$results.itemList key=key item=items} 13 <li class=""> 14 <section class=""> 15 <!-- 商品画像 --> 16 <figure"> 17 <img src="{$items.商品画像}"/> 18 </figure> 19 <dl class="itemInfo"> 20 <dt> 21 品番:{$items.品番} 22 </dt> 23 <dt class=""> 24 {$items.商品名} 25 </dt> 26 <dt class=""> 27 {$items.価格} 28 </dt> 29 <!-- 以下商品の情報続く・・・ --> 30 </dl> 31 </section> 32 </li> 33 <!-- 最大商品数ごとにセクション区切り --> 34 {if (($key+1)%{$smarty.const.1ページ最大商品数} ==0)}</section><section>{/if} 35 {/foreach} 36 {/if} 37</section > 38
追記★
上記tplではclass名を削除してありますが、
sectionのclassをhogeMenuとしてあります。
cssで'selected'classに対してshow状態を設定してあります。
初回1ページ目のsection以外は'selected'のclassがないためhide状態です。
下記は必要部分だけ抜き出してありますが
これに最大ページ数の制御などが追加されています。
css
1 2/*pager*/ 3.hogeMenu { display: none; } 4.hogeMenu.selected { display: block; }
js
1// 改ページ制御 2$(document).on('click', '.改ページclass', function () { 3 4 var current = parseInt($('.hogeMenu.selected').index('.hogeMenu')); 5 if ($(this).is('.prev') && current !== 0) { 6 current = current - 1; 7 $('.hogeMenu').removeClass('selected').eq(current).addClass('selected'); 8 $('body,html').animate({scrollTop: 0}, 0); 9 } else if ($(this).is('.next')) { 10 current = current + 1; 11 $('.hogeMenu').removeClass('selected').eq(current).addClass('selected'); 12 $('body,html').animate({scrollTop: 0}, 0); 13 } 14 current = current + 1; 15 16 // ページボタン制御 17 $('.prev').show(); 18 $('.next').show(); 19 if (current == 1) 20 { 21 $('.prev').hide(); 22 } 23 24}); 25
回答2件
あなたの回答
tips
プレビュー