New Feature: Progressive blurry loading

[kingofwhales]

Is it possible to do progressive blurry loading like this lib: vue-progressive-image ?

Lazy loading is nice but it would be even better to have blurry loading on top..

[janein]

I tried to achieve this effect and nearly got it working. There are just some little issues which prevent it from working perfectly: #217
Maybe you can give it a try and figure out whats wrong? Or maybe it works on your setup.

[service-paradis]

I know it is an old question, but this solution could be useful for those who want to achieve something like this.

I'm using webpack for a project. I configured "lqip-loader" for my images. This loader create a blurry version of your images.

Then, I use the blurry image as the loading image:

{
  src: img.src,
  loading: img.preSrc,
}

In order to ave a smooth transition between those 2 images, i'm using css filter:

img {
  filter: blur(25px);
  transition: all .2s;

  &[lazy=loaded] {
    filter: none
  }
}

[mirkosaugo]

hey @service-paradis thank you for ur suggestion, can you share ur nuxt.config.js config for this module?