Comment empêcher le chargement d'une image provenant du côté serveur ?

Question

J'ai des données API avec des images, mais en raison de problèmes Internet ou autre, les images prennent trop de temps pour être chargées complètement.

Existe-t-il un moyen d'empêcher ce chargement ? En effet, cela ne donne pas une bonne impression lorsque toutes les données sont chargées et que les images mettent encore du temps à s'afficher.

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>

J'ai besoin d'afficher quelque chose d'autre jusqu'à ce que l'image complète soit chargée, comme un espace de rangement, ou je veux mettre les images en cache pour une utilisation future.

Answer 1

Vous pouvez cacher l'image originale et utiliser une image de remplacement dans votre boucle et appeler l'image originale. onload Fonction permettant de masquer l'image de remplacement et d'afficher l'image réelle.

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

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

votre fonction onimageload sera la suivante

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

Démo

Answer 2

J'ai créé un projet stackblitz : https://stackblitz.com/edit/angular-dynamic-image-directive

Tout d'abord, créez une directive personnalisée. Dans le constructeur, injectez la directive ElementRef de la img et définir la valeur par défaut à src attribut.

Et dans OnInit créez un new Image() et définir la nouvelle source. Dans le onload définissent la nouvelle source dans le ElementRef au img étiquette

J'espère que cela vous aidera.

C'est la directive :

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);
  }

}

C'est le modèle :

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