search

shrpne / vue-inline-svg

Dynamically loads an SVG source and inline <svg> element so you can manipulate the style of it
MIT License
175 stars 21 forks source link

All SVG files with high priority #25

Closed Tragio closed 3 years ago

Tragio commented 3 years ago

Hello @shrpne! 🙂

Thank you very much for your amazing work.

I've migrated from vue-svg-loader to vue-inline-svg, however, I noticed that all SVG are with a high priority (importance of high on the browser) and most of my SVG are on the footer. This is causing a big load of SVG loads that are not visible instead of loading the slider images that are at the start of the page.

I would love to know if you have any idea how to lazyload the SVGs using your plugin or any other technique. In my case, I'm using Gridsome.

Thank you very much and keep the good work.

shrpne commented 3 years ago

Hi! Thank you!

I guess you can make some wrapper component which will check if svg is in view

<inline-svg src="my.svg" v-if="isInView"/>

You can use intersectionObserver to check if an element is in view, e.g. vue-intersect

Tragio commented 3 years ago

@shrpne thank you very much. Keep your good work 😃