Ng-lazyload-image: 画像が読み込まれたときのコールバック

作成日 2017年07月18日  ·  5コメント  ·  ソース: tjoskar/ng-lazyload-image

こんにちは、画像が読み込まれたときに通知を受け取るオプションを実装するのはどうですか? 多くの場合、非常に便利です。
この使用例をお勧めします。

@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;
    }
}

アイデアが良ければ、必要に応じてプルリクエストを行うことができます。

最も参考になるコメント

こんにちは、
私はこれについて考えていました、そして私はいくつかのユースケースを見ることができます。 プルリクエストを喜んで受け入れます:)。 このオブザーバーは画像が読み込まれるときに出力されるため、実装は非常に簡単です: https ://github.com/tjoskar/ng-lazyload-image/blob/master/src/lazyload-image.directive.ts#L37

全てのコメント5件

こんにちは、
私はこれについて考えていました、そして私はいくつかのユースケースを見ることができます。 プルリクエストを喜んで受け入れます:)。 このオブザーバーは画像が読み込まれるときに出力されるため、実装は非常に簡単です: https ://github.com/tjoskar/ng-lazyload-image/blob/master/src/lazyload-image.directive.ts#L37

これも必要です! コメントもあるので、いつマージされるかわかります。

#177で修正

3.2.0に含まれています
ありがとう@rimlin

このページは役に立ちましたか?
0 / 5 - 0 評価