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:

enter image description here

try to find a way to load image only when they are visible in screen so it will load them one by one when the user will be on them — Charlie
– Charlie, Commented Nov 6, 2014 at 16:40
@prawn The images are actually pretty small - only around 30-50Kb — Dade
– Dade, Commented Nov 6, 2014 at 16:53

Yatit Thakker · Accepted Answer · 2014-11-06 17:10:28Z

2

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

answered Nov 6, 2014 at 17:10

Yatit Thakker

5925 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

New Dev Over a year ago

The issue here is not that loading takes too long; it's that it takes to long to start loading.

Yatit Thakker Over a year ago

Then I would go with the last part, removing $timeout and calling the function directly, because the $timeout delays starting the loading by a second

Dade Over a year ago

@Yatit - I'm just getting into MongoDB. How hard would it be to set up a collection for my 70 entries and then pull them in via AngularJS? Can you give me some simple instructions?

Yatit Thakker Over a year ago

If you are just getting started, it might take a bit to get the implementation correct. Part of how easy it will be will depend on what platform your server is written on (I am most familiar with node.js).In terms of getting resources from the DB using Angular.js, you can keep using the $http to call your server. On your server, you will have to write logic for a specific URL to GET these images from Mongo (i.e. /api/images/)

Collectives™ on Stack Overflow

angularjs and JSON data loading slowly - looking for better performance

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related