Angular7：加载时显示占位符图像

Question

在以2+角加载图像之前显示占位符图像

<div *ngFor="let key of news>
    <img *ngIf="key.default_photo.img_path" class="img-fluid w-100" 
   [src]="api/uploads/key.default_photo.img_path"  alt="{{key.news_title}}">
</div>

Answer 1

您可以将Image对象与onload事件一起使用，该事件将在浏览器加载图像时触发

		let imgIsLoaded = false;
		const img = new Image(250, 250);
		img.src = 'mypath.jpg';
		img.onload(() => {
			imgIsLoaded = true;
		});

img.isLoading {
  background-color: rgb(150, 150, 150)
}

<img src="mypath.jpg" [class.isLoading]="!imgIsLoaded">

Answer 2

我认为最简单的解决方案是在CSS中定义background-image: url-of-placeholder-image。 占位符图像应足够小以快速加载。您甚至可以直接在CSS中将占位符图像定义为base64编码的字符串。 See here - CSS Tricks

但是很可能您会遇到图像尺寸不同的问题。如果您事先知道图像尺寸，那就太好了。否则，当显示各种尺寸的图像时，页面可能会“跳转”。