加载图像时显示加载图标

Question

我想在一个内部显示一个背景图像/加载微调器div,它将在其中加载一个图像,一旦它完全加载,图像将显示如下:

   <div style="background-image:url('imageThatWillAppearBeforeLoad')"></div>

演示(在jQuery中)

如何使用Angular2/Ionic2？

Answer 1

创建一个显示占位符图像的组件,直到加载所请求的图像,并隐藏所请求的图像.加载图像后,隐藏占位符并显示图像.

@Component({
  selector: 'image-loader',
  template: `<img *ngIf="!loaded" src="url-to-your-placeholder"/>
    <img [hidden]="!loaded" (load)="loaded = true" [src]="src"/>`
})
export class ImageLoader {
  @Input() src;
}

看到它在Plunker工作.

更新

现在我更好地理解了这些要求,这是一个带背景图像的解决方案.这有点hacky,我更喜欢原来的......

@Directive({
  selector: '[imageLoader]'
})
export class ImageLoader {
  @Input() imageLoader;

  constructor(private el:ElementRef) {
    this.el = el.nativeElement;
    this.el.style.backgroundImage = "url(http://smallenvelop.com/demo/image-loading/spinner.gif)";
  }

  ngOnInit() {
    let image = new Image();
    image.addEventListener('load', () => {
      this.el.style.backgroundImage = `url(${this.imageLoader})`;
    });
    image.src = this.imageLoader;
  }
}

更新了plunker.

Answer 2

这是我的一篇帖子的副本

我终于用 CSS 解决了这个问题！当图像在 ionic 2 中加载时， ion-img 标签没有任何类。但是，当最终加载图像时， ion-img 标签获得类“img-loaded”。

这是我的解决方案：

  <ion-img [src]="img.src"></ion-img>
  <ion-spinner></ion-spinner>

还有我的 CSS ：

.img-loaded + ion-spinner {
  display:none;
}