angularjs和JSON數據加載緩慢 - 尋找更好的性能

Question

這是我想要做的背景。

我有一個我想要在JSON文件中管理的約70種產品的列表。該文件由圖像數據，標題，副標題和簡短說明組成。稍後還會有一個PDF文件的鏈接，所以它也會包含在JSON文件中。

這就是JSON文件看起來像現在：

[ 
    { 
     "category": "oil", 
     "image": "/xps-product-list/img/2-STROKE_MINERAL_OIL_GROUP.jpg", 
     "title": "Maintenance and Oil Change Kit Spyder", 
     "subTitle": "Engine Oils", 
     "description": "Complete maintenance right out of the box: O-Ring, XPS oil, Rotax oil filter and instruction sheet" 
    }, 
    { 
     "category": "fuel", 
     "image": "/xps-product-list/img/2-STROKE_PREMIX_OIL.jpg", 
     "title": "XPS Premix Oil", 
     "subTitle": "Engine Oils", 
     "description": "Superior performance 2-stroke oil developed especially for Rotax 2-stroke engines. Formulated for fast and easy mixing at very cold temperatures. Please contact your nearest dealer for suggested retail prices of oil based products." 
    } 
] 

我使用AngularJS在JSON數據帶來和使用NG-重複指令，通過數據進行迭代並顯示：

function AlbumCtrl($scope, $http, $timeout) { 
    $scope.url = 'images.json'; 



    $scope.handleImagesLoaded = function (data, status) { 
     $scope.images = data; 
     $scope.currentImage = _.first($scope.images); 

    } 

    $scope.fetch = function() { 
     $http.get($scope.url).success($scope.handleImagesLoaded); 
    } 

    $scope.setCurrentImage = function (image) { 
     $scope.currentImage = image; 
    } 

    $timeout ($scope.fetch, 1000); 
} 

然後，這是與NG-重複的HTML：我覺得應該

<div id="image-container" ng-controller="AlbumCtrl"> 
     <div id="header"> 
      <div class="product-info"> 
       <ul> 
        <li ng-repeat="image in images | filter:categories"> 
         <img ng-src="{{image.image}}" id="small-prod-img"/> 
         <h2>{{image.title}}</h2> 
         <h3>{{image.subTitle}}</h3> 
         <h4>{{image.description}}</h4> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div>  

做一個更乾淨的方法來做到這一點。我遇到的這個問題是圖片需要很長時間才能加載。我一直在使用Firebug開發工具（網絡選項卡）來查看數據加載的速度。在加載數據和加載圖像之間存在一致的滯後，通常大約爲半秒左右。

我在想我應該創建兩個角部分，一個用於圖像，然後一個用於數據（標題，副標題，描述），從而分離出圖像並希望使加載時間更快。或者只是將圖像編碼到HTML中，然後對其餘的數據進行部分處理。此外，這是我第一次將圖像數據存儲在JSON文件中，因此我不確定首先是否是一個好主意。我找不到任何有關JSON中圖像數據的建議。

任何建議將不勝感激。

皮特

編輯：忘記提到這將是一個頁面，所有裝在同一頁上的產品。我還打算使用該類別並創建一個下拉頁面，以便用戶可以按類別進行過濾

編輯＃2 - 這裏是來自firefox dev工具的網絡選項卡的圖像，您可以清楚地看到滯後在加載圖像：

Answer 1

你這裏有幾個選項。一個不會改變你的網站/應用程序架構的更容易的一個已經在評論中被提及：限制你一次加載的圖像/數據的數量。我猜你可以將70種產品分成9頁（3 x 3格）。通過這種方式，可以更換

<li ng-repeat="image in images | filter:categories"> 

與

<li ng-repeat="image in images | filter:categories | limitTo: 9"> 

您還必須處理背後的邏輯顯示下一組結果，因爲上面的實施將只顯示前9

將改變應用程序體系結構的更難但更具可擴展性的方式是使用數據庫來存儲此信息。我通常使用MongoDB，因爲它以JSON格式返回查詢，與Angular.js很好地集成，其BSON格式比JSON快得多。

最後，我意識到這行可能已經進行測試，但如果你想的總體要求，以更快，您可能需要刪除

$timeout ($scope.fetch, 1000); 

，只是直接調用取功能。可以節省一秒:)