Ng-lazyload-image: 画像の読み込みを手動でトリガーするにはどうすればよいですか？

こんにちは@philipgiuliani 、

問題は、 ng-lazyload-imageは、ユーザーがスクロールしたときに画像がビューポートにあるかどうかだけをチェックすることです。 スクロールイベントがない限り、 ng-lazyload-imageは何もしません。

したがって、ユースケースを解決するには、周囲の世界が変化したことをng-lazyload-image通知する必要があります。 これを行うには2つの方法があります。

1. スクロールイベントを発生させます。 これにより、 ng-lazyload-imageがだまされて、画像がビューポートにあるかどうかが再検証されます。 しかし、彼の解決策は（あなたが示唆したように）きれいではありません。
2. スクロールイベントを使用して独自のストリームを作成し、カスタムイベントとマージします。

// In your component

constructor() {
  this.updateSearchResult$ = new Subject();
  this.scrollAndSearch$ = Observable.merge(
    Observable.fromEvent(window, 'scroll')
    this.updateSearchResult$
  );
}

onSerachResultResponse() {
  this.updateSearchResult$.next()
}

// in your template
<img [lazyLoad]="lazyLoadImage" [customObservable]="scrollAndSearch$" />

この回答はお役に立ちましたか？

私は同様の問題の解決策を探していましたが、それを共有したいと思います。なぜなら、この問題はおそらく人々がそれを見つける場所だと思うからです。

問題：オフセット内に表示されていない場合でも、遅延後に画像をロードする
解決策：固定オフセットの代わりに、オフセット値のObservableを作成し、目的の時間の後に非常に高いオフセットを設定します

// in the Angular 2+ component
constructor () {
  this.imageLoadOffset$ = Observable.merge(
    Observable.of(300),                 // initial offset
    Observable.of(100000).delay(5000)   // offset triggering loading after 5 seconds
  );
}

// in the template
<img [lazyLoad]="'foo.png'" [offset]="imageLoadOffset$ | async" />

ご協力いただきありがとうございます。この問題へのリンクをreadmeファイルに追加しました。

コンテナをすばやくスクロールすると、スクロールした画像が読み込まれません。スクロールした後、現在のビューポートに画像を読み込みます。どうすればよいですか。 ？

@pangshangggg 、申し訳ありませんが、わかりません。 グーグル翻訳を使おうとしましたが、あなたの質問がわかりませんでした：/英語で書くことは可能ですか？

Ionic 2/3では、ユーザーがスクロールを開始するまで画像は読み込まれません。 これは2つの方法で解決できます。
最も醜い方法はこのようなものです：

@ViewChild(Content) container: Content;
ionViewDidEnter() {
      this.container.scrollTo(this.container.scrollLeft, this.container.scrollTop + 1);
      this.container.scrollTo(this.container.scrollLeft, this.container.scrollTop - 1);
   }

そしてこれは良い方法です：

@ViewChild(Content) container: Content;
contentLoaded: Subject<any> = new Subject();
loadAndScroll: Observable<any>;

ionViewDidEnter() {
      this.contentLoaded.next();
}
ionViewDidLoad() {
      this.loadAndScroll = Observable.merge(
         this.container.ionScroll,
         this.contentLoaded
      );
}

(in the template : [customObservable]="loadAndScroll" )

上記のソリューションをイオンに置き換えました。 これ以上何もない ：）

Angular6とrxjs6では、前の例に従って、スクロールイベントによる遅延読み込みを手動でトリガーしようとしていますが、機能していません。 すべての画像は、ページをスクロールせずに次々に読み込まれます。 これは私のコードです。

テンプレート：

<div *ngFor="let image of images">
    <img [defaultImage]="defaultImage"
    [lazyLoad]="image"
    [useSrcset]="true"
    [offset]="offset" [scrollObservable]="scrollObservable" >
</div>

成分：
scrollObservable = fromEvent(window, 'scroll');

私は問題224からこの例に従いました。そこでは、el-DavoがAngular5の問題を修正すると述べました。

Ionic 2/3では、ユーザーがスクロールを開始するまで画像は読み込まれません。 これは2つの方法で解決できます。
最も醜い方法はこのようなものです：

@ViewChild(Content) container: Content;
ionViewDidEnter() {
      this.container.scrollTo(this.container.scrollLeft, this.container.scrollTop + 1);
      this.container.scrollTo(this.container.scrollLeft, this.container.scrollTop - 1);
   }

そしてこれは良い方法です：

@ViewChild(Content) container: Content;
contentLoaded: Subject<any> = new Subject();
loadAndScroll: Observable<any>;

ionViewDidEnter() {
      this.contentLoaded.next();
}
ionViewDidLoad() {
      this.loadAndScroll = Observable.merge(
         this.container.ionScroll,
         this.contentLoaded
      );
}

(in the template : [scrollObservable]="loadAndScroll" )

上記のソリューションをイオンに置き換えました。 これ以上何もない ：）

申し訳ありませんが、問題があります。
this.contentLoaded.next（）;
動作しない
スクロールする場合にのみ正常に機能します
???

こんにちは@zarinara 、
not workingと言うと、エラーが発生しますか？

こんにちは
エラーは発生しません

@zarinara 、新しい問題を作成して、いくつかのコード例とバージョン番号ng-lazyload-image （ npm ls ng-lazyload-image ）を含めることができますか。 intersectionObserverを使用することは可能ですか？