search

hilongjw / vue-lazyload

A Vue.js plugin for lazyload your Image or Component in your application.
http://hilongjw.github.io/vue-lazyload/
MIT License
8.01k stars 870 forks source link

New Feature: Progressive blurry loading #211

Open kingofwhales opened 6 years ago

kingofwhales commented 6 years ago

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 commented 6 years ago

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.

service-paradis commented 5 years ago

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 commented 4 years ago

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