attention admin about comments trackbacks you may also like

画像遅延読み込み

2018年04月22日
ブログいじり
0

画像遅延読み込みを実装してみました。

画像遅延読み込みとは、ブログやホームページを訪れた時、そのページの画像が、例えば1ページに10枚の画像を貼っている場合、普通なら、その10枚を一度に読み込もうとするのですが、画像遅延読み込みは、画面(デスプレイ)で見える範囲の画像だけを読み込み表示をして、その下の画像はスクロールと共に読み込み表示をするというものです。

そうすることで、画像を読み込む通信量はスクロールをした分だけとなります。

当ブログも導入しまして、画面の下にスクロールした場合、フワ~と表示されるように装飾をしています。

180418-00.jpg
180418-01.jpg

「レイジーローディング」、「画像遅延」で検索するとたくさん出てきますので参考にされて下さい。

これを導入するに当たり、ネックになったのが、HTMLのバージョン。当ブログのテンプレートは古く、バージョンは「XHTML」、この際、最新の「HTML5」に画像遅延導入と合わせてバージョンアップしました。(最新のテンプレートはHTML5だと思います。)

バージョンアップの結果は、HTML5の文法チェッカーなどでチェックをします。先ず、「W3C総合検証サービス」で当ブログのアドレスを入力しチェックをします。

180422-02.jpg
180422-02.jpg
180422-00.jpg

HTMLでは、エラーが8個出てます。当初はエラーもかなりあり、ひとつづつ、潰していきました。このエラーの分はFC2の変数の内容だと思うですね・・・これ以上は潰せない所です。

一方、CSSでもエラーを潰し潰し、一個のエラーが残りました。これは、管理者がコメントを投稿した場合、日付を問わず、画像を表示するためのクラス名を日本語で指定しているのが、どうやらCSS3では、エラーになる様です。CSS3ではなかったらエラーではないのですが、HTMLと違ってCSSはバージョンの宣言がないのに、極端な話し、CSS2とCSS3の記述があってもOKみたいなのに・・・CSS3でチェックをするとエラーになるみたいな。ちなみにCSS2のチェッカーは捜せませんでした。

一方、別のチェックサイトでもHTMLのチェックをします。

180422-01.jpg
こちらは点数が出ます。91点。「よくできました」です。

本題の画像遅延ですが、導入の仕方の紹介は差し控えますが、SSL化できた方でしたら難しくはないと思われます。

と、言うか、いつも言われていることですが、「テンプレートを変えた方が速い」と言われればそれまでですが・・・

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

コメント(0)

There are no comments yet.