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

1225 ワード
CSS HTML ローディングマーク image HTML テキストリンク

はじめに

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>

参考サイト