CODEWITHSUNDEEP
angularjsimageperformancecordovaionic-framework
Joshua Ohana
Joshua Ohana

Reputation: 6121

Pre-loading images with a twist for Ionic Cordova app

I have an Ionic Cordova app.

On load I get a dictionary which contains a slew of users and their profile picture URIs. The twist is that the images change all the time, but their URIs remain the same.

Right now on every cycle I just reload the image, but as you can image I'm having some severe performance issues.

What I want to somehow do is pre-load the images, but continue polling the picture URIs in the background and update the image cache when there's a new image to pull (this happens frequently). The images are displayed in an ng-repeat.

I've looked at Ionic's $imageCacheFactory and it doesn't look like it'll do what I need, nor do any of the other cache plugins I've seen out there.

How should I approach this problem?

Upvotes: 0

Views: 589

Answers (1)

Ed_
Ed_

Reputation: 19098

Provided your server is set up to return a 304 when an image hasn't changed (I would expect this), I would approach using the following method:

  1. Create an attribute directive, e.g. volatile-img-src, whose value is either an interpolated URL or an expression evaluating to a URL.
  2. Have the directive look at another attribute value that corresponds to a refresh interval, but make it optional with a sensible default.
  3. Initially just set the src of the image like ng-src does, but subsequently start your polling using $interval.

Your poll mechanism would look something like this:

$interval( function() {
  $http.get(imageUrl).
    success(function(data, status, headers, config) {
      if (data.status === 200){
        // This doesn't happen if the code is a 304.
        reloadImage();
      }
    });
    // TODO: your own error handling.
}, pollFrequency);

I assume from your question that you don't need help with the reload part.

Upvotes: 2

Related Questions