javascript - 使用 Resolve 查看之前在 Contentful 上托管的 Angular 8 加载图像

Question

我正在努力克服以下问题:

正如您在此处看到的，随着页面加载， View 呈现，然后图像缓慢加载。我怎样才能使 View 仅在图像已完全加载时呈现？请注意，这些图像托管在另一个域的 Contentful 上。

我正在尝试使用 Resolve API，但我对它的实现感到困惑，因为我没有发出 HTTP 请求。

下面是我的解析服务:

export class GalleryImagesResolverService implements Resolve<any> {
  
  constructor(
    private contentfulService: ContentfulService
  ) { }

  resolve(route: ActivatedRouteSnapshot) {
    return this.contentfulService.getGalleryImages();
  }
}

这里是内容丰富的服务:

  //get Gallery Images
  getGalleryImages(query?: object): Promise<Entry<any>[]> {
    return this.cdaClient.getEntries(Object.assign({
      // include : 2,
      content_type: CONFIG.contentTypeIds.gallery
    }, query))
      .then(res => res.items);
  }

非常感谢任何输入!也许我的整个方法是错误的，所以如果您有更好的解决方案，请赐教。 :)

Answer 1

就像上面提到的“Sangwin Gawande”一样，您可以在 HTML 中使用 (load) 实现此目的事件监听器。

这是我用来实现此目的的辅助组件:

子组件

import { Component, Input } from '@angular/core';

@Component({
  selector: 'img-with-loader',
  template: `

    <div *ngIf="loading">
      LOADING CONTENT GOES HERE
    </div>
    <img
      [hidden]="loading"
      [src]="imgSrc"
      (load)="loading = false"
    />
  `
})
export class ImgWithLoaderComponent {
  @Input()
  imgSrc: string;

  loading = true;
}

父组件

只需使用它而不是常规的 <img>元素，它不会显示图像(如您的问题所示)，直到它从服务器加载完成。

<!-- background won't show until the image is finished loading -->
<img-with-loader [src]="backgroundUrl"></img-with-loader>