title: angularjs and JSON data loading slowly - looking for better performance
body: <p>Here's the background on what I'm trying to do.</p>
  
  <p>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.</p>
  
  <p>This is what the JSON file looks like right now:</p>
  
  <pre><code>[
      {
          "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."
      }
  ]
  </code></pre>
  
  <p>I'm using AngularJS to bring in the JSON data and use the ng-repeat directive to iterate through the data and display it:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>Then this is the HTML with the ng-repeat:</p>
  
  <pre><code>&lt;div id="image-container" ng-controller="AlbumCtrl"&gt;
         &lt;div id="header"&gt;
            &lt;div class="product-info"&gt;
                &lt;ul&gt;
                    &lt;li ng-repeat="image in images | filter:categories"&gt;
                        &lt;img ng-src="{{image.image}}" id="small-prod-img"/&gt;
                         &lt;h2&gt;{{image.title}}&lt;/h2&gt;
                         &lt;h3&gt;{{image.subTitle}}&lt;/h3&gt;
                         &lt;h4&gt;{{image.description}}&lt;/h4&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/div&gt;     
  </code></pre>
  
  <p>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.  </p>
  
  <p>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.</p>
  
  <p>Any suggestions would be greatly appreciated.</p>
  
  <p>Pete</p>
  
  <p>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</p>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/rESDs.jpg" alt="enter image description here"></p>