attention admin about comments trackbacks you may also like

ローディング画像その2

2019年12月13日
ブログいじり
4

以前の記事でローディング画像を替えたことを紹介しましたが、今回は実際にどの様に実装しているかの紹介です。

ただし、画像遅延をしている必要があります。

Lazyloadを使ってみる【初級編】

画像の遅延読み込み、一般的に Lazyload といわれるものですが、こちらを実際に使ってみようの巻 (´・ω・`)手順及び説明など全て、私が制作したテンプレート上での作業であることが前提で、他製作者様テンプレートに関する言及は一切ありません。また、ご質問についても私のテンプレートをご利用頂いているユーザー様に限定させて頂きますことを予めご了承ください。一部汎用的に使える内容もありますが、ご紹介...

画像遅延とは、画面を下にスクロールにして、その領域に入ったら画像を読み込みます。その時、透明から時間をかけて画像を表示しています。その透明から時間をかけて表示される間、その背景画像として、ローディング画像が見えるわけです。

FC2は、SVG画像もアップできないので、その部分はBase64に変換して対応してみました。

草抜き後の小さな花壇の写真

上の画像のHTMLです。

<div class="loading">
<img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7" 
data-src="https://onga.sakura.ne.jp/gazou/191201-01.jpg" alt="草抜き後の小さな花壇の写真">
</div>

cssです。

.loading{
display: block;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQnkgU2FtIEhlcmJlcnQgKEBzaGVyYiksIGZvciBldmVyeW9uZS4gTW9yZSBAIGh0dHA6Ly9nb28uZ2wvN0FKemJMIC0tPgo8c3ZnIHdpZHRoPSIzOCIgc3Ryb2tlPSIjZmZmIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOCAzOCIgaGVpZ2h0PSIzOCI+CiA8ZyBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9Im5vbmUiPgogIDxnIHN0cm9rZS13aWR0aD0iMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSI+CiAgIDxjaXJjbGUgY3k9IjE4IiBjeD0iMTgiIHI9IjE4IiBzdHJva2Utb3BhY2l0eT0iLjUiLz4KICAgPHBhdGggZD0ibTM2IDE4YzAtOS45NC04LjA2LTE4LTE4LTE4Ij4KICAgIDxhbmltYXRlVHJhbnNmb3JtIGZyb209IjAgMTggMTgiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHRvPSIzNjAgMTggMTgiIGR1cj0iMXMiIHR5cGU9InJvdGF0ZSIvPgogICA8L3BhdGg+CiAgPC9nPgogPC9nPgo8L3N2Zz4K');
background-repeat: no-repeat;
background-position: top center; /* 画像の位置 */ 
background-size: 25px 25px; /* 画像の大きさ */
}

/* 画像の位置 */ で、 center center にすると画像中央で表示されます。

関連する記事
遠太
Author: 遠太
九州は福岡県中間市で環境保全や地域に関するボランティア活動中。
できる時にできる範囲で。そこには、ノルマも強制も義務もありません。

コメント(4)

There are no comments yet.

-  

2019/12/14 (Sat) 15:00

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

遠太  

2019/12/14 (Sat) 16:58

鍵コメ様、こんにちは

本日は、前乗りで大阪難波で宿泊です。大阪城に行ったことが無かったので、大阪城見学、難波でも歩き回り足に来てます(笑)
この時間、もうホテルでゆっくりしてます。若くないですね。

鍵コメ様も、緊張をなさらないように。

-  

2019/12/18 (Wed) 00:12

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

遠太  

2019/12/18 (Wed) 09:25

鍵コメ様、おはようございます。

お互いお疲れさまでした。