search

aFarkas / lazysizes

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
MIT License
17.56k stars 1.73k forks source link

Opacity on Lazyloading and Lazyloaded #402

Open psntr opened 7 years ago

psntr commented 7 years ago

Hey there,

I'm sure there is way to accomplish this only with css, but basically what I'm trying to do, is to 'fade-in' the image once the image is fully 'lazyloaded', not when is being lazyloading. 

.lazyload {
    opacity: 0;
}

.lazyloading {
    opacity: 1;
    background-color:#000;
}
.lazyloaded {
  opacity:1;
  background: transparent;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
  -webkit-transform:translateZ(0);
}

With the above code, while the image is loading, you have a placeholder with black background color (occupying the space with intric-ratio method), but the images render step by step, see screenshot.

screen shot 1

I tried a variant of the code above by changing the opacity of .lazyloading to 0. But then my background-color is of course not visible.

Hope someone can guide me with that issue.

ghost commented 7 years ago

.lazyload, .lazyloading { opacity: 0; } .lazyloaded { opacity: 1; -webkit-transition: opacity 1s ease; transition: opacity 1s ease; }