search

arkon / ng-inline-svg

[Inactive] Angular directive for inserting an SVG file inline within an element.
https://echeung.me/ng-inline-svg/
MIT License
210 stars 88 forks source link

Store SVG file in localStorage, then fetch and use it using with [inLineSVG]="" #86

Open cyphercodes96 opened 6 years ago

cyphercodes96 commented 6 years ago

The title says it all.

I am currently using the following code to load my SVG Images from the assets folder inside my project directory. [inlineSVG]="'/assets/Compression/' + position + '.svg'"

After loading my images for the first time, i need to push them into an array and save them to localStorage

Now my question, how can i load them back using that array that'll be fetched back from the localStorage?

cyphercodes96 commented 5 years ago

@arkon or if there is someway we can persist current cache feature to more then just a session lifetime, that would be awesome!

arkon commented 5 years ago

I still need to think about this but why aren't you setting the cache control on the SVG assets instead? The browser can handle that perfectly fine without any of this manual caching logic.

cyphercodes96 commented 5 years ago

I still need to think about this but why aren't you setting the cache control on the SVG assets instead? The browser can handle that perfectly fine without any of this manual caching logic.

Could you elaborate more on what you meant by setting the cache control on the SVG assets instead?

arkon commented 5 years ago

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

cyphercodes96 commented 5 years ago

I followed up with the docs, did some initial implementations using nginx as the server.

I added the headers Cache-Control: public and now i see a max-age header on each and every SVG request.

However, when I cache the SVG images using [cacheSVG]="true", on a session base, the load up quickly and in a really fast way. However, now after setting the cache control on the SVG assets, monitoring the network tab in dev tools, I find out that at first, the SVG images are taking around 600ms to be loaded, EACH, and after the load, the 600ms load time is changed back to 5ms Somehow, the inlineSVG is loading up the svg images on a normal basis, even if the cache exists, and after that, it's somehow rendering the cached images. I still notice very slow load time, approximately 18 seconds for my component to load up, having 52 SVG's, each SVG is around ~ 180KBS, a few are ~500KBS

Any extra thoughts you share to help me out here? :/