Ng-lazyload-image: Callback when image is loaded

Created on 18 Jul 2017  ·  5Comments  ·  Source: tjoskar/ng-lazyload-image

Hello, what about implement option to get notify when image was loaded? It will be very useful in many cases.
I suggest this example of usage:

@Component({
    selector: 'image',
    template: `
      <div [hidden]="isLoading">
        <img 
          [defaultImage]="defaultImage" 
          [lazyLoad]="image" 
          [offset]="offset"
          (onLoad)="onImageLoad()" />
      </div>
      <div *ngIf="isLoading">
        <loader></loader>
      </div>
    `
})
class ImageComponent {
    defaultImage = 'https://www.placecage.com/1000/1000';
    image = 'https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg';
    offset = 100;
    isLoading = true;

    onImageLoad() {
      this.isLoading = false;
    }
}

If the idea is good, then I could make pull request, if needed.

Most helpful comment

Hi,
I have been thinking about this and I can see some use case. I gladly accept pull requests :). It should be quite easy to implement since this observer gets emitted when the image is loaded: https://github.com/tjoskar/ng-lazyload-image/blob/master/src/lazyload-image.directive.ts#L37

All 5 comments

Hi,
I have been thinking about this and I can see some use case. I gladly accept pull requests :). It should be quite easy to implement since this observer gets emitted when the image is loaded: https://github.com/tjoskar/ng-lazyload-image/blob/master/src/lazyload-image.directive.ts#L37

Need this too! Commenting too so I know when it's merged.

Fixed in #177

Included in 3.2.0
Thanks @rimlin

Was this page helpful?
0 / 5 - 0 ratings