vue-lazyload

vue-lazyload copied to clipboard

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..

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

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
  }
}

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