web-dev-qa-db-ja.com

画像の読み込み中に読み込みアイコンを表示する

div内に背景画像/読み込みスピナーを表示したいのですが、その中に画像が読み込まれます。完全に読み込まれると、次のように画像が表示されます。

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

デモ（jQuery内）

Angular2/Ionic2を使用して同じものを使用するにはどうすればよいですか？

javascriptangularionic2
7
Folky.H

要求された画像が読み込まれるまでプレースホルダー画像を表示し、要求された画像を非表示にするコンポーネントを作成します。画像が読み込まれたら、プレースホルダーを非表示にして画像を表示します。

@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 で動作することを確認してください。

更新

要件をよりよく理解したので、これが背景画像を使用したソリューションです。それは少しハッキーです、そして私はオリジナルのものがより好きです...

@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;
  }
}

更新されたプランカー 。

16
Yaron Schwimmer

これが私の 投稿 の1つのコピーです

私はついにCSSでその問題を解決しました！画像がionic 2に読み込まれると、ion-imgタグにはクラスがありません。ただし、画像が最終的に読み込まれると、ion-imgタグはクラス「img-ロードされました」。

これが私の解決策です：

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

そして私のCSS：

.img-loaded + ion-spinner {
  display:none;
}
4
Guillaume Le Mière

この機能を使用するだけです

loadImage(element: HTMLElement, imagePath: string, spinnerPath: string) {
  element.tagName === 'img'
    ? element.setAttribute('src', spinnerPath)
    : (element.style.background = `url(${spinnerPath}) 50% 50% no-repeat`);
  const image = new Image();
  image.crossOrigin = 'Anonymous';
  image.src = imagePath;
  image.onload = () => {
    element.tagName === 'img'
      ? element.setAttribute('src', imagePath)
      : (element.style.background = `url(${imagePath})`);
  };
}

要素がimageやdiv、またはそれが何であるかを心配する必要はありませんか？

使い方がわからなかった場合の例

ngOnInit() {
  const myElement = document.getElementsByClassName('my-element')[0];
  // or however you want to select it.
  const imagePath = 'path/to/image.png';
  const spinnerPath = 'path/to/spinner.gif'; // or base64 spinner url.

  this.loadImage(myElement, imagePath, spinnerPath);
}

ハッピーコーディング????

0
Ahmed Kamal