如何从rest-api在Angular中的图像上显示加载指示器答案

【问题标题】：How to show loading indicator on images in Angular from rest-api如何从rest-api在Angular中的图像上显示加载指示器
【发布时间】：2020-03-26 00:49:22
【问题描述】：

我想在来自 rest-api 的图像上显示加载指示器。我的代码当前在请求加载数据时在图像上显示加载指示符，但是当我转到分页上的不同页面时，图像不会在视图上显示加载指示符，因为加载仅基于数据已加载？那么如何在视图中显示加载指示器？到目前为止，我的代码是：

component.html

<div class="col-lg-2 col-md-2 col-sm-12">
   <img [hidden]="!imageLoader" src="../../../../assets/images/rolling.gif"/>
   <img [hidden]="imageLoader" (load)="this.imageLoader = false;" class="align-self-start mr-5 mb-5 artwork" src="{{itunes.artworkUrl100}}" alt="image">
</div>

component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../../services/api.service';
import { faSearch } from '@fortawesome/free-solid-svg-icons';
import { faRedo } from '@fortawesome/free-solid-svg-icons';
import { faHeadphones } from '@fortawesome/free-solid-svg-icons';
import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
import { faPlus } from '@fortawesome/free-solid-svg-icons';
import { PlaylistService } from '../../../services/playlist.service';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.scss']
})
export class ContentComponent {

  public data = '';
  public apiData: any;
  public results = [];
  public loading = false;
  public noData: any;
  clicked = false;
  imageLoader = true;

  p: number = 1;
  faSearch = faSearch;
  faRedo = faRedo;
  faHeadphones = faHeadphones;
  faExternalLinkAlt = faExternalLinkAlt;
  faPlus = faPlus;
  searchQuery: string = "";
  clickMessage = '';

  constructor(
    private api: ApiService,
    private list: PlaylistService
  ) { }

  getAll() {
    this.data = '';
    this.loading = true;
    this.api.getAll(this.searchQuery).subscribe((results) => {
      console.log('Data is received - Result - ', results);
      this.data = results.results;
      this.loading = false;
      if (this.data.length == 0) {
        this.noData = true;
      } else if (this.data.length) {
        this.noData = false;
      } else {
        this.noData = false;
      }
    })
  }

  closeAlert() {
    this.noData = false;
  }

  addSongToPlaylist(itunes) {
    this.list.playlist.push(Object.assign({}, itunes));
    this.list.savePlaylist();
    console.log('Playlist - ', this.list.playlist);
  }

  refresh(): void {
    window.location.reload();
  }

  Search() {
    this.api.getAll(this.searchQuery).subscribe((results) => {
      this.loading = true;
      console.log('Data is received - Result - ', results);
      this.data = results.results;
      this.loading = false;
    })
  }

  ngOnInit() {
    this.list.getPlaylist();
  }
}

【问题讨论】：

标签： javascript css angular typescript svg

【解决方案1】：

您可以使用 css 解决这个问题，而不是使用一些变量来跟踪每个图像以隐藏/显示微调器。

如果您将 component.html 更改为

<div class="col-lg-2 col-md-2 col-sm-12">
   <img (load)="$event.target.classList.add('image-loaded')" class="align-self-start mr-5 mb-5 artwork" src="{{itunes.artworkUrl100}}" alt="image">
   <img class="spinner" src="../../../../assets/images/rolling.gif"/>
</div>

并使用这个 css

.image-loaded + .spinner {
  display:none;
}

这个想法是，一旦您的图像加载，“图像加载”类就会添加到图像中。一旦发生这种情况，css 将隐藏微调器。

【讨论】：