search

ApoorvSaxena / lozad.js

🔥 Highly performant, light ~1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more
https://apoorv.pro/lozad.js/demo/
MIT License
7.44k stars 447 forks source link

Including responsive blurred images using Lozad? #264

Open TousifMir opened 3 years ago

TousifMir commented 3 years ago

I am able to perform lazy loading of images but I need to display a default blurred image initially as the actual image is taking time to load.

I am working on a scenario where the responsive images should lazy load based on the screen size but need to include blurred images as a fallback for all responsive images, blurred images should get displayed in case of delays till the actual image loads. I am using Lozad JS

  1. How can I include multiple responsive blurred images for 1x 2x etc as a fallback image?
  2. Can I use 1x 2x instead of 1000w 2000w in data-srcset attribute?

<img class="lozad image-to-load-first" data-srcset="computer@1x.jpg 1000w, computer@2x.jpg 2000w" />

paligiannis commented 1 year ago

Any hope on this? Did toy found the solution?