Cache images before rendered to avoid flickering.

[nilsi]

Hi,

I have an issue where my component is flickering as my images are loading the first time.

Is there any way to cache all images in a folder before hand so that I can avoid this flickering? For example cache all images in "../assets/cached"

My code looks like this. When I click on the image and next is loaded there is some white flickering really fast.

<template>
  <div>
    <inline-svg :src="preview" @loaded="addClickListeners"/>
  </div>
</template>

If I instead test to load all images before like this it works as I wanted it and there is no flicker when I click the last one.

<template>
  <div>
    <inline-svg :src="require(`../assets/topbar.svg`)"/>
    <inline-svg :src="require(`../assets/topbar2.svg`)"/>
    <inline-svg :src="require(`../assets/topbar3.svg`)"/>
    <inline-svg :src="preview" @loaded="addClickListeners"/>
  </div>
</template>

Hope you understand my issue here. Thanks.

[shrpne]

Hi, if you want to cache images then your approach is good enough and you can stick with it.

One of the options is to implement such cache behavior in InlineSvg. But I think it is pretty rare use-case and should not be a part of InlineSvg. Instead, you can use your approach or even create a special wrapper component, which will accept a list of images, render list of <inline-svg> components and remove them, when images are loaded.

What I think could be a good part of InlineSvg, is an option, to preserve display of the old image, when a new one is loading. It should prevent flickering. I'll try to work on it when I will have spare time. Also, PRs are welcome :)

[shrpne]

keep-during-loading prop has been added in v2.0.0. It is true by default. It makes vue-inline-svg to preserve old image visible, when new image is being loaded. So no flickering should happen when you change src from topbar.svg to topbar2.svg