Angular 8 Загрузка изображения, размещенного на Contentful, перед просмотром с помощью Resolve

Question

Я пытаюсь преодолеть следующее:

Как вы можете видеть здесь, когда страница загружена, представление отображается, затем изображения медленно загружаются. Как сделать так, чтобы представление отображалось только после полной загрузки изображений? Имейте в виду, изображения размещены в другом домене, на 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 с помощью EventListener (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>