vitaliy-bobrov / ionic-img-cache Goto Github PK
View Code? Open in Web Editor NEWImage caching for Ionic 1.x applications.
License: MIT License
Image caching for Ionic 1.x applications.
License: MIT License
Hello,
I've implemented the cache in a ionic application, and is working fine in android. But is not persisting the images in the cache after the app reloads. So is loading all images again every time the app starts, once in the application is working fine and images get cached.
Thanks for this great directive!
download's file is chrisben/imgcache.js,when use the 'brow install --save ionic-img-cache'
Hello again :), I have an issue with my application with the big size images and caching them, simply when I have a big image and loading, the image cache sometimes catching it as empty image, or if it half loaded, for example, to reproduce the issue, try to load many images with 1MB of size and during this disconnect the data.
For me, I'm facing this with caching background images.
Hey @vitaliy-bobrov,
Amazing plugin, it's really awesome and works very well.
Any chance there is / can be a way to manually cache an image via a function or something? We have two image sizes and in some use-cases we have a custom script downloading the other image along with the original one but it isn't an ideal solution. Something like cacheSrcStorage.get('img-path')
would be fantastic
Looking forward to your thoughts on this - Many thanks!
The background caching doesn't seem to work when the background image is set via an inline style=""
tag on an element.
Is it possible, am I missing something?
Anybody have a work-around?
We are using image cache in our ionic application from last 4-5 months and it was working fine till now with meta tag:
Image cache is not working in android web view >=54. (cdvfile images which are persisted in localstorage is not loading).
Can you check this once?
NOTE: image cache is working fine with following meta tag:
Unsupported URL on real Ios Device. Works fine in Sim.
I did add the following to my config:
<preference name="iosPersistentFileLocation" value="Library"/>
I am noticing that the actual remote files specified in ng-src are being loaded prior to the cached file. Is there any way to disable this behavior? In my case, there is no need to fetch image ever again if it is available in cache.
Hey there,
I keep getting this MIME type issue:
imgcache.js:49 INFO: current size: 490829
imgcache.js:49 INFO: File loaded from cache
Resource interpreted as Image but transferred with MIME type text/plain: "cdvfile://localhost/persistent/ionic-img-cache/36f378d9d6e479ec94ba7bdf5d3eff8ac06432e5".```
Please can you shed some light on this?
Thanks!
To be able to minify the code without problems some changes must be made and to avoid this error:
https://docs.angularjs.org/error/$injector/strictdi?p0=init
ionic-img-cache.js
angular.module('ionicImgCache', ['ionic']) .run(['$ionicPlatform', 'ionicImgCache', '$log', init]) .provider('ionicImgCache', ionicImgCacheProvider) .factory('ionImgCacheSrv', ['$q', ionImgCacheSrv]) .directive('ionImgCache', ['ionImgCacheSrv', ionImgCache]) .directive('ionImgCacheBg', ['ionImgCacheSrv', ionImgCacheBg]);
Hello guys,
I'm having the error net::ERR_UNKNOWN_URL_SCHEME even putting the recommended entries in config.xml and index.html. The version of installed ionic is 4.2.1 and the app was generated using the command (example):
ionic start "MyApp" blank --type=ionic1 --cordova --no-git --no-link --bundle-id=myapp
guilhermefilippo$ npm -v
6.4.1
guilhermefilippo$ node -v
v10.13.0
guilhermefilippo$ ionic --version
4.2.1
To use the app, I removed the ion-img-cache tag for now, but the caching is very important.
Has anyone ever seen this error?
Thanks.
When I try to configure the $ionicImgCacheProvider
I get the unknown provider error message, but instead it must be ionicImgCacheProvider
without $
sign.
It is README fix only.
It's defined like this inside ionic-img-cache.js:
.provider('ionicImgCache', ionicImgCacheProvider)
Hello
I'm using the linear-gradient()
with background-image
the problem is I get a lot of error messages in the console, and seems cache not working as well.
.image-bg {
background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.60)), url('img-url-here') center center no-repeat;
}
not sure if there is another properties for this, but currently I have with linear-gradient
, I get the following prints in the console:
INFO: Background image URL: rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(/api/image/2
imgcache.js:468 GET http://localhost:8100/rgba(0,%200,%200,%200.6),%20rgba(0,%200,%200,%200.6)),%20url(/api/image/2 404 (Not Found)Private.FileTransferWrapper.download @ imgcache.js:468ImgCache.cacheFile @ imgcache.js:640ImgCache.cacheBackground @ imgcache.js:838(anonymous function) @ ionic-img-cache.js:113(anonymous function) @ imgcache.js:820(anonymous function) @ imgcache.js:710
imgcache.js:46 ERROR: Image rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(/api/image/2 could not be downloaded - status: 404
imgcache.js:46 ERROR: Download error source: rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(/api/image/2
imgcache.js:46 ERROR: Download error target: /ionic-img-cache/9d04e5c7c904a9f0de5ecd3e4809340bd5c42a60.2
imgcache.js:46 ERROR: Download error code: 0
Edit: sorry seems you can't do anything with this?
related to : https://github.com/chrisben/imgcache.js
I used the plugin for app in ionic 1.
I have the error on iOS 10 iPhone 5s & iPhone 6s but it works on iPhone with iOs 9.x.
TypeError: undefined is not an object (evaluating 'ImgCache.$deferred.resolve')
callbackFromNative โ cordova.js:314
nc2 โ cordova.js:1022
I see that images are saved
-[CDVFileTransferDelegate connection:didReceiveResponse:] [Line 760] Streaming to file /var/mobile/Containers/Data/Application/32E768D3-DEA2-448C-A954-C631FDC72F6C/Library/files/imgcache/1f78cf0b1e56a9fdc197149a6fd013a0ca8d4e14.logo
-[CDVFileTransferDelegate connectionDidFinishLoading:] [Line 626] File Transfer Download success
2016-10-16 19:00:21.737798
[1036:282954] File Transfer Finished with response code 201
Best
ol3j
I've an ionic 1 app, i tried to use this, but it returns the following error
ReferenceError: ImgCache is not defined.
Please let me know if you have any updates
Uncaught TypeError: angular.module(...).run(...).provider(...).factory(...).directive(...).directive(...).component is not a function
at ionic-img-cache.js:10
at ionic-img-cache.js:327
Angular version 1.4.3
Please look into this issue.
any ideas to fix this? thanks
The below issue occurs in the actual device.
TypeError: Cannot read property 'length' of undefined
at Object.Helpers.sanitizeURI (imgcache.js:69)
at Object.ImgCache.getCachedFile (imgcache.js:694)
at Object.ImgCache.isCached (imgcache.js:732)
at ionic-img-cache.min.js:1
at ionic.bundle.js:20569
at forEach (ionic.bundle.js:13648)
at Object.Attributes.$set (ionic.bundle.js:20567)
at interpolateFnWatchAction (ionic.bundle.js:21859)
at interpolateFnWatcher (ionic.bundle.js:24186)
at Object.watchGroupAction [as fn] (ionic.bundle.js:28667)
Failed to instantiate module ionicImgCache due to:
TypeError: Cannot read property 'controller' of undefined.
On:
Angular 1.5.5
Ionic 1.3.3
While running with IPAD 2 with IOS9, to load 10 images which total size for 10 images is around 2MB. keep receive memory warning in xcode. then app might crash for first initial which start to cache the image.
I'm building an app with offline capability I will like to use the image URL from cache how can I accomplish that? Thanks for this awesome plugin It has help me a lot.
Hello,
Its not adding images because its not printing anything in console. I added both js file. All 3 plugins are there. Added attribute to img also. But in console its not printing anything.
Hi,
I'm getting an error trying to install:
npm install --save ionic-img-cache
npm ERR! code ETARGET
npm ERR! notarget No matching version found for imgcache.js@^1.2.0
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'ionic-img-cache'
npm ERR! notarget
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/waynekaskie/.npm/_logs/2017-07-05T01_33_04_881Z-debug.log
Why doesn't return the cached file? it is lost in file_entry !== null instead of passing it back.
// checks if a copy of the file has already been cached // Reminder: this is an asynchronous method! // Answer to the question comes in response_callback as the second argument (first being the path) ImgCache.isCached = function (img_src, response_callback) { ImgCache.getCachedFile(img_src, function (src, file_entry) { response_callback(src, file_entry !== null); }); };
And then
ImgCache.isCached(src, function(path, cached) { defer.resolve(cached); }, defer.reject);
I'm also using this to cache other types of files manually (PDF)
Thanks for your effort
Does this download the image every time there is an internet connection? Or this always prioritizes the cached image. Checking if the image was changed when there is an internet connection?
Hi ! the plugin work without any problem , but what about preload image ?
I found the caching folder on my phone but it's empty, it only contains a 0kb file. How can i make sure caching is working ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.