cache image using angularjs without plugin

Question

<img src="http://assets.example.com/static/thumb_{{selected}}.jpg"/>

my selected model is dynamic, I can load the img proper but how to cache every single photo because I notice there's a delay when I apply new value to selected.

Is your asset store under your control? You could set correct cache-control headers to tell the browser to cache the resource. — ste2425
– ste2425, Commented Oct 27, 2016 at 12:41

Shankar Gangadhar · Accepted Answer · 2016-10-29 23:30:11Z

1

angular .module('demo', [ 'ngImageCache' ]) ;

Note: Image is loaded using javascript, content is stored in sessionStorage for next loading

Use package npm install ng-image-cache

answered Oct 29, 2016 at 23:30

Shankar Gangadhar

1974 silver badges8 bronze badges

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

3 Comments

Blue Over a year ago

Part of the requirements was 'without plugin'. This seems to contradict that requirement.

Shankar Gangadhar Over a year ago

If you are not using through an $http service you might use the $cacheFactory service that generates cache objects for all Angular services. Internally, the $cacheFactory creates a default cache object.

Shankar Gangadhar Over a year ago

use put method: cache.put(key, value); & you can easily access the key by cache.get(key); Or if you're using any $http method then $http({ method: 'GET', url: '/api/dummyimages.json', cache: true });

Blue · Accepted Answer · 2016-10-29 20:41:08Z

0

The easiest way would be to do it in your controller:

angular.module('app').controller('myController', function(images) {
    var preload = {};
    angular.forEach(images, function(image, i) {
        preload[i] = new Image()
        preload[i].src = "http://assets.example.com/static/thumb_" + image + ".jpg";
    });
});

edited Oct 29, 2016 at 20:41

answered Oct 27, 2016 at 12:43

Blue

23k7 gold badges69 silver badges102 bronze badges

1 Comment

Jessica Illy Over a year ago

ah great, I forgot there's things call new Image()!!

Collectives™ on Stack Overflow

cache image using angularjs without plugin

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related