2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

画像の読み込み中にローディングマークを表示させる

Last updated at Posted at 2022-03-24

はじめに

APIから画像を取得する時、読み込みが遅いと画像がある部分が空欄になる。
そこに画像が表示されることを分かりやすくするため、ローディングマークを表示させる。

loading.gifを背景に設定

こちらのサイトから透過済みのフリー画像を保存。
背景画像にloading.gifを設定し、メイン画像が表示されるとloading.gifが隠れるようにする。

コード

imageにAPIから取得した画像URLが入る。

<div style="background-image: url('images/loading.gif'); background-repeat: no-repeat;
  background-position: center center; min-height: 50px;">
  <img :src="image">
</div>

参考サイト

2
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?