angularjs and JSON data loading slowly - looking for better performance

Question

Here's the background on what I'm trying to do.

I have a list of about 70 products I want to manage in a JSON file. The file consists of image data, a title, a subtitle and a short description. There will also be a link to a PDF file later on, so it will also be included in the JSON file.

This is what the JSON file looks like right now:

[
    {
        "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."
    }
]

I'm using AngularJS to bring in the JSON data and use the ng-repeat directive to iterate through the data and display it:

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);
}

Then this is the HTML with the ng-repeat:

<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>     

I feel like there should be a cleaner way to do this. This issue I'm running into is the images are taking a long time to load. I've been using the Firebug dev tools (the network tab) to see how fast the data is loading. There is a consistent lag between the time the data is loaded and the images are being loaded, usually around a half second or so.

I was thinking I should create two angular partials, one for the images and then one for the data (title, subtitle, description), thus separating out the images and hopefully making the load times faster. Or just coding the images into the HTML, and then have one partial for the rest of the data. Also, this is the first time I've had image data in a JSON file, so I'm not sure it's a good idea to begin with. I couldn't find any advice online good or bad for having image data in the JSON.

Any suggestions would be greatly appreciated.

Pete

EDIT: Forgot to mention this will be one page, with all the products loaded on the same page. I also was going to use the category and create a drop down page so the user could filter by category as well

EDIT #2 - here is an image of the network tab from firefox dev tools where you can clearly see the lag in loading the images:

Answer 1

You have a few options here. The easier one that won't change the architecture of your site/application has already been mentioned in a comment: limit the number of images/data you load at once. I'm guessing you can separate the 70 products into 9 per page (3 x 3 grid). This way, you can replace

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

with

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

You will also have to handle the logic behind displaying the next set of results because the above implementation will only show the first 9.

The harder but more scalable way that will change the architecture of your application is to use a Database to store this information. I generally use MongoDB because it returns queries in JSON format, integrates well with Angular.js, and its BSON format is much faster than JSON.

Lastly, I realize this line may have been for testing, but if you want the overall request to be faster, you may want to remove

$timeout ($scope.fetch, 1000);

and just call the fetch function directly. Might save a second :)