Javascriptを使用して大きなHTMLテンプレートを読み込むためのベストプラクティス？

Question

search.js

function search_function() { 
    $("#search-button").attr('disabled','disabled'); 
    $("#product-container").empty(); 
    $(".paging_link").empty(); 
    $("#product-container").html('<div class="col-xs-12 text-center" style="margin-bottom: 25px; margin-top: 25px;"><i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span></div>'); 
    var num; 
    $.ajax({ 
     type: 'POST', 
     url: '/api/search.php', 
     async: true, 
     data: $('#search-capture').serialize() +"&page=1", 
     success: function (data) { 
     console.log(data); 
     $("#product-container").empty(); 
     array = $.parseJSON(data) 
     if(array[1].length > 0) 
     { 
      num = array[0]; 
      $.each(array[1], function (index, item) { 
      $.ajax({ 
       type: 'POST', 
       url: '/api/item.php', 
       data: {item: item}, 
       async: false, 
       success: function (data) { 
       if(data) 
       { 
        $("#product-container").append(data); 
       } 
       } 
      }); 
      }); 
      $("#search-button").removeAttr('disabled'); 
      history.pushState(null, null, "search.php?search="+$("#search").val()+"&sort="+$("#sort").val()+"&page=1"); 
     } 
     else { 
      num = 0; 
      $("#search-button").removeAttr('disabled'); 
      $("#product-container").append('<div class="col-xs-12 text-center" style="margin-bottom: 25px;"><h1>No results for <i>"'+ $("input[name=search]").val() +'"</i>.</h1></div>'); 
     } 
     $(".paging_link").bootpag({ 
      total: num, 
      maxVisible: 5, 
      page: 1 
     }); 
     } 
    }); 
    } 

/api/item.php

<?php 
    include_once("../library/config.php"); 
    include_once("../library/user.class.php"); 
    $user = new user($pdo); 
    if(isset($_POST['item'])) 
    { 
    $item = $_POST['item']; 
    $image_array = json_decode($item['images']); 
    $person = $user->person_exists($item['owner_id']); 
    } 

?> 
<div class="col-md-3 col-md-offset-0 col-sm-4 col-sm-offset-0 col-xs-10 col-xs-offset-1" style="margin-bottom: 25px;"> 
    <div class="col-item"> 
      <div class="post-img-content"> 
       <img src="<?php echo $image_array[0]; ?>" style="height: 100%; width: 100%;"/> 
       <span class="post-title"> 
        <b><?php echo $item['name'];?></b><br> 
       </span> 
       <?php 
       if($item['price'] > $item['sale_price']) 
       { 
       ?> 
       <span class="round-tag">-<?php echo round(($item['price'] - $item['sale_price'])/$item['sale_price'] * 100); ?>%</span> 

       <?php 
       } 
?> 
      </div> 
      <div class="info"> 
       <div class="row"> 
        <div class="price col-md-12"> 
         <h5>Offered By: <a href="/user.php?id=<?php echo $item['owner_id']; ?>"><?php echo $person['firstname']; ?> <?php echo $person['lastname']; ?></a></h5> 

<?php 
if($item['price'] > $item['sale_price']) 
{ 
?> 
<div><b>$<?php echo $item['sale_price']; ?></b> <s class="text-muted">$<?php echo $item['price']; ?></s> <br> + $<?php echo $item['shipping']; ?> Shipping</div> 

<?php 
} 
else { 
?> 
<div><b>$<?php echo $item['price']; ?></b><br> + $<?php echo $item['shipping']; ?> Shipping</div> 
<?php 
} 
?> 
        </div> 
       </div> 

       <div class="row"> 
       <div class="col-sm-10 col-sm-offset-1"> 
     <hr style="margin-top: 0px; margin-bottom: 10px;"> 
       </div> 
       <div class="col-xs-6"> 
        <form class="form" name="add-to-cart"> 

        <div class="form-group form-group-sm" style="margin-bottom: 0;"> 
        <input type="hidden" name="id" value="<?php echo $item['id'];?>"> 
        <input type="hidden" name="quantity" id="quantity" placeholder="quantity" value="1"> 
        <input type="hidden" name="action" value="addtocart"> 
        <button class="btn btn-default btn-sm btn-block" type="submit" id="search-button"><i class="fa fa-shopping-cart"></i> </button> 
        </div> 
       </form> 
       </div> 
       <div class="col-xs-6"> 
        <div class="form-group form-group-sm" style="margin-bottom: 0; margin-top: 0px;"> 
        <a href="details.php?id=<?php echo $item['id']; ?>" class="btn btn-default btn-sm btn-block"><i class="fa fa-list"></i></a> 
        </div> 
       </div> 
       </div> 
      </div> 
     </div> 
</div> 

これはAPIコールからの結果を得るために、私のJavascript機能であれば最初は/api/search.phpにAJAX呼び出しを行うので、私がいる問題は、ロード時間です私が表示したいアイテムと、名前、価格、売り手IDなどのすべてのデータを取得します。次に/api/item.phpへの別のAJAX呼び出しを行います。これはPHPを使用するHTMLテンプレートを持ち、POSTのデータを使用してテンプレートを埋めます、そしてそのHTMLを返すそれをテキストに追加します。しかし、2番目のAJAX呼び出しでは、アイテムを適切な順序でロードするために、asyncをfalseに設定しなければならないため、ロードが非常に遅くなります。私はJavascriptを使って膨大なHTMLブロックを読み込む以外に、2番目のAJAX呼び出しを使わずにアイテムアイテムを読み込む方が効率的で実現可能な方法があるのだろうかと思っていました。

Answer 1

あなたはAjaxが

を完了したときに、その後、実際のコンテンツと交換することができたすべてのスパンが順番に同期し追加されますので、あなたが最終的なデータのための適切な場所を持って、順番に、プレースホルダ要素を挿入することができ

$.each(array[1], function(index, item) { 
    var loc = $("#product-container").append("<span/>").children().last(); 
    // loc is the span just appended 
    $.ajax({ 
     type: 'POST', 
     url: '/api/item.php', 
     data: { 
      item: item 
     } 
     success: function(data) { 
      if (data) { 
       loc.replaceWith(data); // replace the span with data 
      } else { 
       loc.remove(); // remove the no longer needed placeholder 
      } 
     } 
    }); 
}); 

注：私のjQueryのは、私は方法論の簡単なテストをしましたしながら、あなたが使用可能にする前に完了するために、すべてのそれらのAJAXを待つ必要がある場合、私は、またどこか

のjQueryを詰めたかもしれない、さびであります海RCH-ボタンと履歴pushState

$.when(array[1].map(function(item) { 
    var loc = $("#product-container").append("<span/>").children.last(); 
    return $.ajax({ 
     type: 'POST', 
     url: '/api/item.php', 
     data: { 
      item: item 
     } 
     success: function(data) { 
      if (data) { 
       loc.replaceWith(data); 
      } else { 
       loc.remove(); 
      } 
     } 
    }); 
})).then(function() { 
    $("#search-button").removeAttr('disabled'); 
    history.pushState(null, null, "search.php?search=" + $("#search").val() + "&sort=" + $("#sort").val() + "&page=1"); 
});