如何在Angular2 +中輕輕更改img src

Question

當我動態更改img的src屬性時，會在加載新圖像時顯示舊圖像。

我有一個顯示一些數據的組件：文本和圖像。 單擊時，基礎數據將更改（即來自服務器的新數據）。 單擊后，文本會立即更改，但組件會在加載新圖像時顯示舊圖像。 加載新圖像時，會以可視方式顯示該圖像，這會占用大量時間。

在實際應用中，可以通過按鈕點擊獲得產品詳細信息和更改產品。 所有數據立即更換，但不替換圖像。

組件未被銷毀（重用）時存在問題。

我點擊后已經嘗試過清晰的圖像src ，但是沒有用。

我在模板中有簡單的綁定

img [src]="img.url" style="width: 300px; height: 300px">
<p>{{ img.text }}</p>

點擊時圖像變化

this.img = this.images[1];

您可以在此處查看示例應用程序https://stackblitz.com/edit/angular-cojqnf

這是否可以更好地控制此圖像更改過程？ 例如，在點擊時清除圖像並等待具有空背景的新圖像將是很棒的。

Answer 1

我使用你的stackblitz演示了一下，我基本上將你的代碼包裝在ImageGhostDirective以使其可重用。 該指令使用MutationObserver監聽src屬性的任何更改以更改樣式。 在'load'事件上使用HostListener ，它將樣式恢復為正常。 我從第一次加載的不透明度0開始，然后在連續的圖像更改之間出現不透明度0.2，但這完全是任意的，可以用微調器或任何類型的占位符代替......

這是stackblitz的鏈接： https ：//stackblitz.com/edit/angular-image-ghost-directive

<img [src]="'https://loremflickr.com/300/300?random=' + index"
     style="width: 300px; height: 300px" imgGhost>

@Directive({
  selector: 'img[imgGhost]'
})
export class ImageGhostDirective implements OnDestroy {
  private changes: MutationObserver;

  constructor(private elementRef: ElementRef) {
    this.changes = new MutationObserver((mutations: MutationRecord[]) =>
      mutations.filter(m => m.attributeName === 'src').forEach(() => this.opacity = 0.2)
    );

    this.changes.observe(this.elementRef.nativeElement, {
      attributes: true,
      childList: false,
      characterData: false
    });
  }

  ngOnDestroy(): void {
    this.changes.disconnect();
  }

  @HostBinding('style.display') display = 'block';
  @HostBinding('style.opacity') opacity = 0;

  @HostListener('load')
  onLoad(): void {
    this.opacity = 1;
  }
}

也可以通過在指令裝飾器中使用img:not([imgGhost])選擇器告訴Angular將此指令自動附加到每個img元素。 這樣，您就不必手動將指令放在應用中的每個圖像上。

希望這很有用。

Answer 2

最后，我通過在img和[ngStyle]上利用(load)事件實現了我想要的。

在模板中我添加了加載處理程序和樣式：

<img [src]="img.url" style="width: 300px; height: 300px" (load)="loaded()"
 [ngStyle]="{'display': imgVisible ? 'block' : 'none'}">

在后端：

imgVisible = true;

當更改數據時，也隱藏圖像：

this.imgVisible = false;

接下來，當加載圖像時，顯示圖像（小心！當舊圖像和新圖像具有相同的URL時，不會引發此事件;如果是這種情況，則需要有條件地隱藏圖像）

loaded(): void {
  this.imgVisible = true;
}

完整的解決方案代碼： https ： //stackblitz.com/edit/angular-ewptj7

我不是這種解決方案的忠實粉絲。 當您有更多圖像時，可能很難應用。

歡迎所有更好的解決方案。