1. HOME
  2. ホームページ制作メモ
  3. 『イラスト・マンガ』コーナーに「画像遅延読み込み」機能を実装しました

『イラスト・マンガ』コーナーに「画像遅延読み込み」機能を実装しました

2021年1月13日(水)
『イラスト・マンガ』コーナーに「画像遅延読み込み」機能を実装しました

「画像遅延読み込み」ってなんぞや

ディスプレイに表示されている画像のみをダウンロードしてくる機能です。
これを実装すると、画面に写っている画像だけが読み込まれます。
すると、画面に写っていない画像は読み込まれない(ダウンロードされない)ので、ページが軽くなったように体感できます。
「このページ、重すぎやん!」と(少し)感じにくくなります。

『イラスト・マンガ』コーナーは画像が多いせいで、どうしてもページが重くなりがち

それぞれのイラストの詳細ページは、「イラストページならこんなもんだよね……」と思える範囲(だとわたしは判断している)なので「画像遅延読み込み」機能を実装していません。
問題はその詳細ページにいたるまでの、サムネイル羅列のページ!
これがやたら重かった!


歳月がたつと少しづつとはいえ作品が増えていくので、並ぶサムネイルも必然的に増えていきます……。
すると、ますますページが重くなるという……。

ちょっと自分でもドン引きするレベルで重くなっていたので、今回、「画像遅延読み込み」を実装することにしました。

実装方法

「Intersection Observer(インターセクション・オブザーバー)」なるものを使う方法が2021年1月現在では最新式で、SEO対策にも効果的のようです。
「ようです」っていうのはつまり、「Intersection Observer」を使う方法は、わたしのWEB力では実装できなかったからです/(^o^)\

とてもわかりやすく書いてくださっているブログ【Tips of Rubbish】さんの記事『[JavaScript] 画像の多いページを軽くするスクリプト「lazyLoad.js」』を拝読し、JavaScriptを使う方法で、なんとか実装することができました……。

※下駄さんの運営なさっているブログ【Tips of Rubbish】は、現在は【Mynt Blog】として移転なさっているようです。

そろそろ手打ちの限界か?

PHPやCGIを導入している部分もありますが、いまだ20年近く前の方法をメインにして、この『あとりえ極星堂』のホームページを作っています。

……それってどんな方法?

テキストエディタにhtmlタグやレイアウトを設定するCSSを手入力すること!

それこそ個人ホームページが全盛期だった時代は、その方法でじゅうぶん楽しくホームページをつくることができました。
いまもそうだとは思います。本質的なことは何も変わっていないはず。

ただ、「この部分のこういうところをこのように改善したいなあ」と悩むとき、ちょっと検索して、詳しい人が解説してくださっているコードをコピーペーストで貼りつけて解決☆ ……というわけにはいかなくなってきているように感じます……。

インターネットの技術がどんどん進んでいっていて、片手間に説明を読むだけではわからないことが増えてきました……。
技術の進歩の速さが恐ろしいです!

それでもわたしはテキストエディタに手入力してホームページをつくることが好きなので、限界までこの方法で楽しく運営しつづけようと思います。
わたしが現在の『あとりえ極星堂』をつくるにあたって、とてもお世話になった本。パソコン、タブレット、スマホ対応のレスポンシブなWEBサイトをつくることができるようになります。
こちらの本にもお世話になりました。簡易的ではありますが、レスポンシブ対応のWEBサイトをつくることができる本。
鍋弓わた
近代史とイケメン軍人さんを愛でる主婦同人作家の鍋弓わたです。
少女~女性漫画風味のイラスト・マンガを描いています。

ご感想・お仕事のご依頼などはメールフォームからご連絡ください。
コメントを送る
Page Top