如何防止加载来自服务器端的图像答案

【问题标题】：How to Prevent image from loading that comes from server side如何防止加载来自服务器端的图像
【发布时间】：2020-02-01 17:35:03
【问题描述】：

我有包含图像的 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>

我需要显示其他内容，直到像占位符一样加载完整的图像，或者我想缓存图像以供将来使用。

【问题讨论】：

您可以为img 标签创建自定义指令。当 API 调用接收到图片的 URL 后，您可以使用 new Image() 创建一个新图片，并在 onload 回调中替换 src 属性。
我建议在您从 api 获取 img 时将某种标志设置为 true，默认情况下需要设置为 false。然后在您的模板中使用 *ngIf show 有条件地隐藏占位符 div 和图像
@AkshayBhat 它只能帮助隐藏或取消隐藏占位符，但对图像加载速度没有帮助
@HarunYilmaz 你能给我举个例子吗？这会很有帮助
@Waqarali 我发布了一个工作示例作为答案。

标签： javascript html angular ionic-framework

【解决方案1】：

您可以隐藏原始图像并在循环中使用占位符图像并调用原始图像onload函数来隐藏占位符图像并显示实际图像

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

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

你的 onimageload 函数看起来像

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

Demo

【讨论】：

我已经尝试过了，但它不起作用，它显示了两个图像（占位符和原始图像），请参阅链接。 link我只需要阻止加载
@Waqarali 你是否在你的css中添加了.hidden类你必须添加.hidden{display:none}

【解决方案2】：

我创建了一个 stackblitz 项目：https://stackblitz.com/edit/angular-dynamic-image-directive

首先，创建一个自定义指令。在构造函数中，注入img标签的ElementRef，并将默认值设置为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'"/>

【讨论】：