clearScreen clearScreen - 8 months ago 52
Javascript Question

caching images in angularjs - ngRepeat

I wanted to know how to implement a image cache in AngularJS, or a way to load the image once and use it many times in the same application

I have to show a directory listing in ui-select . The drop down may contain folders or files. For folders I want to show a folder icon and for files I want to show a file icon. I am using ng-repeat to iterate the array of files and folders

[ {name: "abc/", folder: true}, {name: "pqr.txt", folder: false}, ......]

Inside the ng-repeat, I have a ng-if which shows a folder icon, if folder-attribute is true else it shows a file-icon. Right now, I am using tag to load the image. The image is in my local directory, will it slow down the performance? Should I use a cache?


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, even if we don’t create one explicitly.

Then you can use the the put method which allows to to put a key (string) of any JavaScript object value into the cache.

cache.put(key, value);

You can access it by


Or if you are using through $http service you can enable the cache by setting the cache parameter as true:

   method: 'GET',
   url: '/api/users.json',
   cache: true