遠太のエコボランティアブログ
 九州は福岡県中間市で展開しているボランティアの記録

遠太のエコボランティアブログ 九州は福岡県中間市で展開しているボランティアの記録

記事一覧  管理画面

home 未分類 画像遅延読み込み。

画像遅延読み込み。

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

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

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

当ブログも導入しまして、画面の下にスクロールした場合、フワ~と表示されるように装飾をしています。
180418-00.jpg
180418-01.jpg
(画像をクリックすると大きな画像を表示します)

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

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

バージョンアップの結果は、HTML5の文法チェッカーなどでチェックをします。先ず、「W3C総合検証サービス」で当ブログのアドレスを入力しチェックをします。
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化できた方でしたら難しくはないと思われます。

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

ブログランキングに参加しています。
応援よろしく です。
トラックバックURL
https://onta0001.blog.fc2.com/tb.php/261-662f3469
トラックバック
コメント
管理者にだけ表示を許可する
 
  プロフィール

遠太

Author:遠太
九州は福岡県中間市で環境保全や地域に関するボランティア活動中。
できる時にできる範囲で。そこには、ノルマも強制も義務もありません。
  ランキング参加
FC2ランキング にほんブログ村 環境ブログ 環境ボランティアへ
にほんブログ村 家族ブログ 仲良し家族へ にほんブログ村 地域生活(街) 九州ブログ 北九州情報へ
FC2ランキング
にほんブログ村 環境ブログ 環境ボランティアへ
にほんブログ村 家族ブログ 仲良し家族へ
にほんブログ村 地域生活(街) 九州ブログ 北九州情報へ
  今後の清掃予定
  最新記事
  リンク
  カテゴリ