Ng-lazyload-image: Как я могу вручную запустить загрузку изображений?

Привет @philipgiuliani!

Проблема в том, что ng-lazyload-image проверяет только, находится ли изображение в области просмотра, когда пользователь прокручивает. Пока нет события прокрутки, ng-lazyload-image ничего не сделает.

Итак, чтобы решить ваш вариант использования, нам нужно сообщить ng-lazyload-image , что мир вокруг него изменился. Это можно сделать двумя способами:

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 изображения не загружаются, пока пользователь не начнет прокрутку. Вы можете решить эту проблему двумя способами:
Самый уродливый способ такой:

@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" )

Я просто перенес решения, опубликованные выше, на ionic. Ничего больше :)

В Angular 6 и rxjs 6 я пытаюсь вручную запустить ленивую загрузку с помощью события прокрутки, следуя предыдущим примерам, но это не работает. Все изображения загружаются одно за другим без прокрутки страницы. Это мой код.

Шаблон:

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

составная часть:
scrollObservable = fromEvent(window, 'scroll');

Я следовал этому примеру из выпуска 224, где эль-Даво сказал, что это решает проблему в Angular 5.

В Ionic 2/3 изображения не загружаются, пока пользователь не начнет прокрутку. Вы можете решить эту проблему двумя способами:
Самый уродливый способ такой:

@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" )

Я просто перенес решения, опубликованные выше, на ionic. Ничего больше :)

извините, но у меня проблема.
this.contentLoaded.next ();
не работает
Работает нормально только при прокрутке
???

Привет @zarinara!
Когда вы говорите not working , возникают ли ошибки?

Привет
Ошибок не возникает

@zarinara , можете ли вы создать новую ng-lazyload-image ( npm ls ng-lazyload-image ). Можно ли использовать intersectionObserver ?