aFarkas/lazysizes

Can i use css spinner loading while the image is Lazy loaded?

matinwd opened this issue · 4 comments

matinwd commented

Hey.
I hope you response my question.
I wanna know if i can handle a spinner load while images are Lazy loading

lspoor commented

Hi, check the CSS API section of the docs here.

ownHormez commented

Its possible, but its not possible to fade them in after an image was loaded.

lspoor commented

Its possible, but its not possible to fade them in after an image was loaded.

What reason would you show it after the image is loaded? The OP asked while the image are loading.

ownHormez commented

Basic example:

  1. You like to show a loading icon while the image is loading - customer sees there is going on something.
  2. After the loading is completed, you like to fade them in, not show them just in the same second.

Just from the tech aspect I'm fine, the images are lazy loaded. But if you like to show them with some animation you current can't just easy addEventListener('beforePrintingImage', addCoolAnimationClass.bind). You know?

Currently if you try:

.lazyload,.lazyloading:

  • background-image: url('spinner');

and

.lazyloaded:

  • opacity: 0;
  • animation from opacity: 0 to opacity: 1

Then the image will show a millisecond and then the lazyloaded will be provided. ""This is a little bug (or may not bug its a feature, but you know what i mean)"" , the lazyloaded should show after printing not just when the resource was downloaded.