-1

I have a gallery module, the functionality implemented in this module as below

- getting the file path from the server using ajaxrequest
- the response will be json object of all image file path
- setting the filepath in image src attribute

As we are using ajax request, the images are loading in online mode only. so how to implement the functionality so that images should show in offline also.

GS-Magento
  • 338
  • 5
  • 15

3 Answers3

0

You may consider returning images as base64 string from the server and store them in a localstorage. On the view use data-ng-src directive like this . In your controller check if there is no connection and set base64 string from the localstorage as this: $scope.data.image_url=

Alex Ryltsov
  • 2,385
  • 17
  • 25
0

After loading an image once, your best bet is going to be get a base64 representation of it, and then persisting that to disk.

Get the base64 representation of the image here: Get image data in JavaScript?

Write the base64 data to disk using ng-cordova/ionic native and the writeFile method using the Cordova file plugin. http://ngcordova.com/docs/plugins/file/

writeFile(path, file, data, replace)
Community
  • 1
  • 1
Dan Bucholtz
  • 713
  • 1
  • 5
  • 11
0

There are some great answers here that I would like to build on...

I would suggest using PouchDB as a cache for base64 and/or Blob data after you have downloaded the original (one of my apps does the same thing with mp3 data converted to a Blob). You could then implement a method that checks the cache for the image before making a network request.

Nolan Lawson has created an excellent library for these binary conversions: https://github.com/nolanlawson/blob-util

Just save the base64 string to your PouchDB instance after the initial download, you can then check for that data before your app reaches out to the network.

Just beware of storage limits on iOS Safari (~50mb default)...

MT_
  • 116
  • 1
  • 1
  • 10