<img>タグで画像を表示させるときに、少し大きめの画像を読み込むときに時間がかかることがあるかと思います。
その際にローディング画像を表示させる方法についてです。
今回参考にさせていただいたサイトはこちら。
画像の読込完了まで、ローディング画像を表示する方法
https://allabout.co.jp/gm/gc/431053/
ちなみに、ローディング画像は、以前ご紹介した「Loader Generator」を使いました。
【Webサイト】ローディングのGIFアイコンが手軽に作れる「Loader Generator」
https://cpoint-lab.co.jp/【webサイト】ローディングのgifアイコンが手軽に作/
で、ローディング画像の表示方法ですが、すべてCSSで済みます。
しかも、3行！
コードはこちらです。
img{
background-image: url("ローディング画像のパス");
background-repeat: no-repeat;
background-position: center center;
}
サンプルコードでは、全ての<img>タグに適用させていますが、もちろん ID や Class で指定してもOKです。
コードの説明をすると、まず「background-image」で<img>タグの背景画像にローディング画像を設定します。
そして「background-repeat: “no-repeat”;」で画像の繰り返し表示を無効にし、「background-position: “center center”;」で画像を上下左右中央表示にします。
設定は以上！とても簡単です！
表示されるのは本当に一瞬で、ちらっと見えるだけかもしれませんが、画像が表示されるまで、ただ空間がぽっかりと空いているよりも、読み込み中を示すアイコンが見えたほうが、まだ画像の読み込みを待てるような気がしますね。
画像の読み込み中のアニメーションをお探しの方は、ローディング画像生成サイト「Loader Generator」共々、是非参考にしていただければと思います。
