How to create a transition effect between defaultImage and lazyLoad

[AndreasSchmid1]

Hello tjoskar. Thank you for this great library! I want to ask if it is possible to create a transition effect beween the defaultImage and the lazy loaded image.

Thank you for help in advance

[tjoskar]

HI @AndreasSchmid1, thanks for your kind words.

You can add an animation on the image, eg.

img.ng-lazyloaded {
  animation: fadein .5s;
}
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

(see "Default image" on the example page: https://tjoskar.github.io/ng-lazyload-image)

You can also add a transition between images if you create two images, one with the default image and one with the lazyloaded one. eg. https://github.com/tjoskar/ng-lazyload-image/blob/master/example/pixelated-image.component.ts (see "Pixelated image" on the example page: https://tjoskar.github.io/ng-lazyload-image)
As you may know, you can slow down the animation to get a better look at the animation (https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations).

It is also possible to add a transition on the background-image:

#image {
  height: 250px;
  width: 500px;
  transition: background-image 1s ease-out;
}

<div id="image" [defaultImage]="defaultImage" [lazyLoad]="image"></div>

See this page for an example (not using ng-lazyload-image): http://jsfiddle.net/8L7775fa/4/

Let me know if you run into problems.

[chandrasachin]

Hi All,
I am developing a web application in angular 5 wherein I am using ngx bootstrap carousel and ng-lazyload-image in my html page as below.My default image loads successfully showing the spinner before the real image actually gets loaded.But the issue I am facing is my default image also increases in size as per my carousel size .Is there any way to fix the size of my default image

Below is my code------------------------
<carousel [interval]="slideInterval" >
<slide *ngFor="let image of carouselImageList | async">
<img id="mainCarouselImgLayout" [defaultImage]="defaultImage"
[lazyLoad]="image.carousel_image_key"
[offset]="offset">

The defaultImage is a spinner gif image(comes from my component) which I want to show to the users until my real images get loaded ( [lazyLoad]="image.carousel_image_key" ).I have fixed the size of my carousel as below in my css

#mainCarouselImgLayout{
display: block;
width: 100%;
height: 400px
}
This same css gets applied on my spinner image.What I want is to keep the size of my spinner image intact and only change the carousel image height.Right now spinner image looks very big and distorted

[NodiraIbrogimova]

@chandrasachin Did you find soution?
My spinner size is really big in card than my image. I want to resize the spinner image for smaller size

[DwieDima]

HI @AndreasSchmid1, thanks for your kind words.

You can add an animation on the image, eg.

img.ng-lazyloaded {
  animation: fadein .5s;
}
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

(see "Default image" on the example page: https://tjoskar.github.io/ng-lazyload-image)

You can also add a transition between images if you create two images, one with the default image and one with the lazyloaded one. eg. https://github.com/tjoskar/ng-lazyload-image/blob/master/example/pixelated-image.component.ts (see "Pixelated image" on the example page: https://tjoskar.github.io/ng-lazyload-image) As you may know, you can slow down the animation to get a better look at the animation (https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations).

It is also possible to add a transition on the background-image:

#image {
  height: 250px;
  width: 500px;
  transition: background-image 1s ease-out;
}

<div id="image" [defaultImage]="defaultImage" [lazyLoad]="image"></div>

See this page for an example (not using ng-lazyload-image): http://jsfiddle.net/8L7775fa/4/

Let me know if you run into problems.

Thank you for this snippet @tjoskar !
Using this, you'll always see the fadeIn animation, even if the image is already loaded, by switching the pages.
In my case i'm using ionic which is using reuseRouteStrategy. If you switch Tabs the fadeIn animation will trigger again.
Is there a solution to show the fadeIn once the image loaded?

[DwieDima]

I tried your hooks as described, but they won't if i use custom scroll-content on multiple div per page

class LazyLoadImageHooks extends IntersectionObserverHooks {
  public setLoadedImage(imagePath: string, attributes: Attributes): void {
    attributes.element.classList.add('animated-img');
    super.setLoadedImage(imagePath, attributes);
  }

  public finally(attributes: Attributes): void {
    super.finally(attributes);
    setTimeout(() => {
      attributes.element.classList.remove('animated-img');
    }, 3000);
  }
}

...

@NgModule({
imports: [
  LazyLoadImageModule
],
providers: [
    { provide: LAZYLOAD_IMAGE_HOOKS, useClass: LazyLoadImageHooks },
  ],
})  

.animated-img {
  animation: fadeIn 3s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}