はじめに
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>
参考サイト