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$" />

这是否回答你的问题？

我一直在寻找类似问题的解决方案，并希望与他人分享，因为我怀疑人们可能会找到这个问题。

问题：即使在偏移量内不可见，也要在延迟后加载图像
解决方案：创建固定的偏移量，而不是固定的偏移量，并在所需时间后设置一个很高的偏移量

// 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" />

感谢您的贡献，我在自述文件中添加了指向此问题的链接。

当我快速滚动容器后，滚动过去的图像不加载，滚动结束后，加载当前视口的图片，怎么做？？

@pangshangggg ，对不起，但我不明白。 我尝试使用Google翻译，但我不明白您的问题：/您可以用英语写吗？

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

我只是将上面发布的解决方案转换为离子型。 仅此而已:)

在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期的示例进行了研究，其中el-Davo表示这已解决了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" )

我只是将上面发布的解决方案转换为离子型。 仅此而已:)

对不起，但是我有一个问题。
this.contentLoaded.next（）;
不工作
只有在滚动时才能正常工作
???

嗨@zarinara ，
当您说not working ，您得到任何错误吗？

你好
没有错误发生

@zarinara ，您能创建一个新的期刊并包含一些代码示例以及ng-lazyload-image （ npm ls ng-lazyload-image ）的版本号吗？ 您可以使用intersectionObserver吗？