Как предотвратить загрузку изображения со стороны сервера

Question

У меня есть данные API с изображениями, но из-за проблем с Интернетом или из-за того, что изображения загружаются слишком долго.

Есть ли способ предотвратить эту загрузку, потому что она выглядит плохо, когда все данныезагружены и изображения все еще требуют времени для отображения.

menu.html

<ion-card class="categories_item" *ngFor="let category of categories; let i = index;">
  <ion-grid>
    <ion-row>
      <ion-col size-md="2" size="4" class="img-zoom" align-self-center>
        <img [src]="category?.Picture1" (click)="imgView(category?.Picture1)" id="imgClickAble"
          class="imgClickAble" />
          .....
      </ion-col>

      <ion-col size-md="9" size="6" (click)="goToitemCategory(category.ID)">
        .....
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-card>

Мне нужно показать что-то еще, пока полное изображение не загрузится, как заполнитель или яхотите кэшировать изображения для будущего использования.

Answer 1

Я создал проект stackblitz: https://stackblitz.com/edit/angular-dynamic-image-directive

Сначала создайте пользовательскую директиву. В конструкторе введите ElementRef тега img и установите значение по умолчанию для атрибута src.

И в обратном вызове OnInit создайте new Image() и установите новый источник. В обратном вызове onload установите для нового источника значение ElementRef для тега img

Надеюсь, это поможет.

Это директива:

import { Directive,  ElementRef, Input,Renderer2, OnInit} from '@angular/core';

@Directive({
  selector: '[appDynamicImage]'
})
export class DynamicImageDirective implements OnInit {

  @Input()
  dynamicSrc: string;

  private defaultSrc = 'https://via.placeholder.com/500x300';

  constructor(private elem: ElementRef,
  private renderer: Renderer2) { 
    this.setSource(this.defaultSrc);
  }

  ngOnInit(){
    setTimeout(() => { // just to mock loading time
      this.setAsyncSource(this.dynamicSrc);
    },2000)

  }

  setAsyncSource = (src: string) => {
    const dynamicImage = new Image();
    dynamicImage.onload = (e) => {
      console.log('onload', e)
      this.setSource(src);
    }

    dynamicImage.onerror = (e) => {
      console.log('Error happened', e)
    }

    dynamicImage.src = src;
  }

  setSource = (src: string) => {
    this.renderer.setAttribute(this.elem.nativeElement,'src',src);
  }

}

Это шаблон:

<img appDynamicImage [dynamicSrc]="'https://www.fillmurray.com/640/360'"/>

Answer 2

Вы можете скрыть исходное изображение и использовать изображение заполнителя в цикле и вызвать оригинальное изображение onload, чтобы скрыть изображение заполнителя и показать фактическое изображение

<img src="placeholderurl" id="placeholder_{{i}}" >

<img [src]="category?.Picture1" class="hidden" id="original_{{i}}" (load)="onImageLoad(i)">

Ваша функция загрузки образа будет выглядеть как

onImageLoad(idx){
  var orginalEle=document.getElementById(`original_${idx}`)
  var placeHolderEle=document.getElementById(`placeholder_${idx}`);
  placeHolderEle.classList.add('hidden');
  orginalEle.classList.remove('hidden');
}

Демо